3 Ways to Highlight Links to the Current Page with CSS

by Megan McDermott, 15 June 2008 - 3:44pm

Good usability suggests that you should always indicate links to the page the user is currently on. In fact, in an ideal case you wouldn’t link to the current page at all. On the other hand, in order to build a site that’s consistent and easy to maintain, navigation menus need to be either included with a separate html file or generated with a scripting language. This makes it difficult to identify the link to the current page and treat it differently.

Fortunately, with the help of CSS, JavaScript, and PHP, there are several possible solutions to this problem.

Why is this a problem?

• It causes confusion about where they are on your site I thought I was on the home page. So why is there a link to "home" there?
• It causes confusion about where they can go on your site Oh, that page might have what I want. Wait, I was just here..
• It forces an unnecessary page load, wasting the user's time.

Solution #1: HTML/CSS only

With this solution, all you have to do is add in some extra classes to your HTML and use CSS to style them. Each page has a class on the body tag that identifies it:

Each navigation item also includes a class identifying that particular link:

Then you target those classes in your CSS, defining a different state for the current page:

When you are on the home page, the link with the class “home” will have a green background. You can even add a cursor:default rule to make it appear that the link is no longer active.

Pros:

This solution does not require JavaScript or server-side programming. It’s easy to implement on a small, static site and works for users who have JavaScript turned off.

Cons:

The main problem with this is that you need to add a lot of extra classes into your HTML. This may be fine with for a simple site or when you only want the effect to appear on one small navigation menu. In addition, on dynamically generated sites it’s difficult if not impossible to add a unique class identifier to the body tag for each page.

References:

Auto-Selecting Navigation, by Drew McLellan for 24ways (2005)

Highlighting current page with CSS, by Ian Hicks (2003)

CSS Mastery: Advanced Web Standards Solutions, by Andy Budd (2006), p. 90

Solution #2: JavaScript

This solution uses JavaScript to match the URL of the current page to the URL of the link. The JavaScript simply gets the URL of the current page, then it looks through all the links in the navigation menu you target. If the link href matches the url of the page, it adds an extra CSS class to that link.

Detailed instructions are available in the reference links below.

Pros:

This solution is easy to implement on any type of site, including dynamically generated sites. It does not require any modification of existing navigation menus or unique identifiers for pages or navigation items.

Cons:

This will not work if users have JavaScript turned off. This is relatively rare, but there are many emerging devices such as mobile phones, as well as some assistive technologies, that do not support JavaScript.

It will also not work if the page is referenced by different URLs. For example, if the link points to http://yoursite.com/ but the page is referenced from http://yoursite.com/index.html. It's good practice to ensure that pages are only accessed by one URL anyway so I wasn't too worried about this.

References:

Clear Links to Current Page with Unobtrusive JavaScript, by Jonathan Snook (2004)

Automatically highlight current page in menu via Javascript, by Armand Niculescu

Solution #3: PHP

There are a few ways to highlight links using PHP (or other server-side languages).

The first is to use PHP to add an identifier to every page. Then build conditionals into your navigation menu to add an id to links that point to the current page. This option shares many of the same problems as the pure CSS solution above. (You could also use Dreamweaver template conditionals to do this without PHP).

A second option is similar to the JavaScript method described above. Once again, you can get the URL of the current page and compare it with the links in your navigation menu. Then you build your navigation based on whether the navigation item matches the current page. In this case you can even modify the HTML code to remove the link anchor altogether or replace it with another tag (<strong> would be appropriate).

See the references below for detailed instructions.

Pros:

Easy to implement if you have a customizable system and PHP is available.

Cons:

Requires PHP and a level of customization that may not be possible in with some systems. Most solutions require a unique identifying variable to be inserted on every page.

References:

Keeping Navigation Current With PHP, by Jason Pearce for A List Apart (2003)

EasyNav - Keeping navigation clean and current (designed for complex nested navigation trees).

Faux Active Link (instructions in PHP and ASP; there are some other interesting solutions in the comments)

My Choice

After looking through all the options I decided to try Solution #2, using JavaScript. The PHP solution seemed needlessly complex, and I really didn’t want to have to add any conditionals or classes to the HTML code or rebuild my navigation menu. It had to be something that would automatically parse the url’s and decide if the user was on the current page.

The code developed by Jonathan Snook was the best for my needs, and removing the a tag entirely was an added bonus. I was even able to modify the code to add a <strong> tag where the <a> tag was. This enabled me to easily add some CSS to my previously designed menu.

However, if I was developing a site from scratch I would consider creating the menu through PHP instead of using the Javascript solution here.

This is the code I am using:

/*
CLCP v2.1 Clear Links to Current Page
Jonathan Snook
This code is offered unto the public domain
http://www.snook.ca/jonathan/
*/

window.onload = clearCurrentLink;

function clearCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i

See it in action here.

References:

The Ten Most Violated Homepage Design Guidelines, by Jakob Nielssen (2003), see #10

Discussion

Discuss this article in the forums.