Blog (my web musings)

Find out what's interesting me, get tips, advice, and code gems that don't fit elsewhere.

Search Blog

Highlight the menu button for the current web page

Details

It seems to come up in forums quite a lot, where a developer wants to highlight the menu button that corresponds to the web page currently being viewed. This makes a lots of sense; it is good for UX as it provides a clear visual indicator of a vistor's current location within a website. "Where am I?" is one of the fundamental questions users need to answer in order to successfully navigate around a site. If they know where they are (or where they have been), they can more easily decide on where to go next, and UX experts say that many websites need stronger "you are here" indicators to help satisfy this basic user need.

From the Nielson Norman Group, "Navigation: You Are Here" article;

Navigation should not only show where you can go but also where you are now. Each page on a website could be the first page your website visitors see, so it's important to convey enough context so that people can proceed immediately toward their goals.

The JavaScript

This is a task that calls for JavaScript because we cannot achieve anything like it with CSS alone. No jQuery or other external libraries needed - this is relatively simple stuff so we can do it with vanilla JavaScript... say "Hello" to the navHighlight() function;

<script>

function navHighlight(elem, home, active) {

    var url = location.href.split('/'),

        loc = url[url.length -1],

        link = document.querySelectorAll(elem);

    for (var i = 0; i < link.length; i++) {

        var path = link[i].href.split('/'),

            page = path[path.length -1];

        if (page == loc || page == home && loc == '') {

            link[i].parentNode.className += ' ' + active;

            document.body.className += ' ' + page.substr(0, page.lastIndexOf('.'));

            }

        }

    }

navHighlight('.demo-nav a', 'index.htm', 'current'); /* menu link selector, home page, highlight class */

</script>

How it works

The script works by comparing the page's filename from the URL, to any href attribute values in the menu, and if they match, it adds a class to the anchor's parent <li>.

Additionally, it adds the page name as a class to the <body> tag, which can be useful for defining styles in a global stylesheet that are only applicable to individual web pages.

So, if you were viewing the "about-us.htm" page in a web browser, the menu <li> for "About Us" would get a ".current" class applied to it, and the <body> element would get an ".about-us" class, generating something like this;

<body class="about-us">

<nav class="demo-nav">

  <ul>

    <li><a href="/index.htm">Home</a></li>

    <li><a href="/abount-us.htm" class="current">About</a></li>

    <li><a href="/our-services.htm">Services</a></li>

    <li><a href="/contact-us.htm">Contact</a></li>

  </ul>

</nav>

Note that the navHighlight() JavaScript function takes 3 parameters;

  1. The CSS selector to the <a> elements in the menu
  2. The file name of the home page (this will also be the class added to the <body> of the home page, minus any file extension)
  3. The class you want to give to current / active menu items

Pop it above the closing </body> tag and use the ".current" class in your CSS to style and highlight current menu buttons however you like.

Check out the demo below to see a full working example;

Demo