I have not seen anything about how to properly highlight what page you’re currently on when using a templated navigation bar on a dynamic webpage… I couldn’t even google for a solution because I don’t know the correct terminology.

There are a number of ways to highlight the link to the page you’re currently on. For example, you could pass a parameter and alter the view based on the parameter; or you could include the navigation pane in each content view then apply the highlight with the page. I don’t think either of those solutions is very clean, so here’s my solution using HTML, CSS, and jQuery (it should work across browsers).

<!-- index.html -->
<div id="topnav">
	<ul>
		<li><a href="home">Home</a></li>
		<li><a href="about">About</a></li>
		<li><a href="links">Links</a></li>
		<li><a href="services">Services</a></li>
		<li><a href="contact">Contact</a></li>
	</ul>
</div>

The unordered list is styled as a standard navigation menu (A List Apart has a nice article and book about it), and I have it setup to highlight whatever menu item is hovered. To highlight the current page, I set that item to the same background color as the hover effect. A little snippet here:

/* application.css */
a:hover, a:focus { background: #454d2f; }
.highlight { background: #454d2f; }

Now, all that’s left is to let jQuery apply the highlight class to the menu item corresponding to the page we’re on; an effect I achieve thusly:

// application.js
$('#topnav').ready(function() {
	var page = window.location.href.split("/")[3]; // after the slash at the end of the domain name 
	if (page == "") { page = "home"; }
	$(this).find("a[href$="+page+"]").addClass("highlight"); 
});

You could do this without jQuery, but it is my favorite JavaScript library and I like to use it :)

Does anyone know of a better way?