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
possible solutions to this problem.
Why is this a problem?
Including a link to the current page is a usability problem for several reasons:
- 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
Then you target those classes in your CSS, defining a different state for
the current page:
body.home a.home, body.articles a.articles, body.blog a.blog
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.
It’s easy to implement on a small, static site and works for users who
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.
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
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.
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.
rare, but there are many emerging devices such as mobile phones, as well as
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
Solution #3: PHP
There are a few ways to highlight links using PHP (or other server-side
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).
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.
Easy to implement if you have a customizable system and PHP is
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.
Navigation Current With PHP, by Jason Pearce for A List Apart (2003)
EasyNav - Keeping
navigation clean and current (designed for complex nested navigation
Active Link (instructions in PHP and ASP; there are some other
interesting solutions in the comments)
After looking through all the options I decided to try Solution #2, using
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
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
This is the code I am using:
CLCP v2.1 Clear Links to Current Page
This code is offered unto the public domain
window.onload = clearCurrentLink;
var a = document.getElementsByTagName("A");
See it in action here.
The Ten Most
Violated Homepage Design Guidelines, by Jakob Nielssen (2003), see #10
Discuss this article in the forums.