This article will show you how to highlight the current page's link in a navigation menu using only CSS, no scripting. For example, if you have a navigation menu made up of Home, About, Contact and Products links and our viewer is currently viewing the About page then the link will be highlighted or in some way indicate that they are viewing that page.

The usual way to go about doing this is to add a class to the link that identifies the current page. However, the class would need to be moved to the relevant link on each page so that only the link that refers to the current page is affected. While this method works just fine it means that the menu cannot be part of an include because it is different on each page due to the current class changing position on each page to reflect the current page. In this brief article I will show you how to automate this process (to a degree) that will allow the menu to be part of an include.

The first thing we need is to construct our menu -- since a menu is really just a list of links we will use a list to accomplish this in the most semantic way.

I have chosen to use class="one", class="two" etc. to make it easier to follow along in this demonstration (don't be tempted to use class="1" as class names or id's cannot begin with a digit.)

Now that we have a means of addressing each list item due to the class identifier we placed there we will add a class to the body tag. Once we have added the class to the body then it is a simple matter of using that body class combined with the list class to target our current page.

For the home page the CSS would be:

What we are saying here is that only on pages that have a body class of section1 and a link with a class of one have its background coloured. We simply repeat that process for all the links in the menu and the resulting CSS looks like this:

The only extra task is that on each of your HTML pages you must make sure that the correct class is in place in the body tag for this to work. For example, on page2.htm the body tag should like this:

Once you have done that then the correct page will automatically be highlighted when the user lands there. Here is a full demonstration of the above technique where you can navigate to each page to test it out.

Drawbacks

The main drawback is that there are the extra classes in the HTML needed to accomplish this; otherwise it is a useful technique. You could also do this with server-side or client-side scripting, but that wasn't the purpose of this demonstration.

I should also point out a couple of accessibility issues with the above approach. The first is that it is generally considered bad practice to have the current page still be an active link. However, in some situations this may be unavoidable.

The second accessibility issue is that colour alone is not enough to identify the current item as that would discriminate against those with poor sight or colour blindness, so you should have suitable alternatives built into your accessibility strategy.

That should do it - you have now learned a 100% CSS solution to highlighting the current link in a navigation menu for the page you are on. Until next time - happy coding!