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 easy 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?
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 link:
- Home
- Articles
- Blog… etc…
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 {
background-color: green;
}
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.
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.
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 ( 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.
