You Are Here: Using PHP To Highlight Navigation

by Kyle on · Posted in Howto

When you walk into a mall, one of the first things you come to is a map with a "you are here" indicator that lets you know where you are. On a website, we can accomplish this by higlighting the current location on a navigation bar, menu, or list. Since the primary navigation is the most prominent feature on a website, we will discuss an easy way to do this with PHP.

Active or current navigation is big with usability nuts. Crucial's website uses active navigation on the tabs and sidebar on every page. This visual indicator shows you exactly where you are, and will keep visitors to your website from getting frustrated and ultimately leaving.

Determine The Page Name

The first thing we need to do is come up with a naming convention for our pages. Some of the examples that I have seen make you label each page with a variable. This just seems like too much work. We will use the $PHP_SELF server variable to extract the actual filename, and use this as our reference point to setup the active navigation.

<?
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
?>

What this does is extract just the name of the file, and removes the .php file extension for redundancy's sake. So if we were on a page called about.php, the $page variable would be equal to about.

The HTML & CSS

Now we need to build the structure for the navigation bar, and the CSS that will make everything all warm and fuzzy.

HTML

We are going to use a very basic navigation bar, and here is the markup for that:

<div id="navbar">
	<ul>
		<li><a class="active" href="one.php">Page 1</a></li>
		<li><a href="two.php">Page 2</a></li>
		<li><a href="three.php">Page 3</a></li>
		<li><a href="four.php">Page 4</a></li>
	</ul>
</div>

CSS

Now we will use CSS to jazz up the navigation bar, and set the style for the active navigation element to distinguish it from other elements.

#navbar {
height:30px;
}

	#navbar ul {
	margin:0;
	padding:0;
	list-style:none;
	}
	
		#navbar ul li {
		display:inline;
		}
		
			#navbar ul li a {
			float:left;
			color:#fff;
			height:18px;
			margin:0 0 0 5px;
			border:1px solid #000;
			padding:5px 20px;
			text-decoration:none;
			background:#000;
			}
			
				#navbar ul li a:hover,
				#navbar ul li a.active,
				#navbar ul li a.active:hover {
				color:#000;
				border:1px solid #000;
				background:#fff;
				}
			
			#navbar ul li:first-child a {
			margin-left:0;
			}

If we just use the HTML and CSS from above, we will end up with something like this:

Bringing It All Together

This is where the magic happens. Using an if-statement and our $page variable, PHP will determine what page a visitor is on and output the correct HTML to set the active navigation of an element: 

<div id="navbar">
	<ul>
		<li><a<? if($page == 'one'): ?> class="active"<? endif ?> href="one.php">Page 1</a></li>
		<li><a<? if($page == 'two'): ?> class="active" <? endif ?> href="two.php">Page 2</a></li>
		<li><a<? if($page == 'three'): ?> class="active" <? endif ?> href="three.php">Page 3</a></li>
		<li><a<? if($page == 'four'): ?> class="active"<? endif ?> href="four.php">Page 4</a></li>
	</ul>
</div>

You can also use this same technique all over your website. You can create one convenient location to store page titles, keywords, and descriptions for your pages based on the filename and the $page variable.

Ultimately, this would best be done with a database, or at least functions that you can call anywhere, but this is a simple and effective way to increase the usability of your website with very little code.

Download The Code

Now that we have the individual elements, we'll put the PHP code and HTML that should be outputted in a file called navigation.php, and we will simply call this file with a PHP include from any page that we want to output the navigation bar. Click here to download the zip file.

Save. Share. Submit.