Often I see quite elaborate work to have the current page displayed in a different way in the navigation bar. From javascript to PHP, with the most common one being to give the current page link in the navigation bar the distinction of the class=”current” (or class=”active”).

For myself I find those approaches which use additional, non CSS code too complicated and adding the .current class to a different navigation link per page works only as long as you are not using a server-side include for the whole navigation bar.

So, what’s the solution?

A simple 3 step process:

  1. Add an ID to the body tag of every page which will be linked to from the navigation bar. For example
    <body id="home"> or <body id="gallery">.
  2. Add an ID to each navigation link. (Remember: ID’s for single selectors, classes for multiple usages on a page). For example:

    <div id="navigation">
    <a href="index.html" id="nav-home">Home</a>
    <a href="products.html" id="nav-products">Products</a>
    <a href="gallery.html" id="nav-gallery">Gallery</a>
    <a href="about.html" id="nav-about">About</a>
    </div>

  3. Add CSS selector which will highlight the current page.


    body#home a#nav-home,
    body#products a#nav-products,
    body#gallery a#nav-gallery,
    body#about a#nav-about
    {
    color: red;
    }

Now you can add the HTML part into a server-side include (i.e. you need only to write it all 1x instead for each page separately) and without further ado your current page will be highlighted in the navigation bar.

Of course there are other ways how you can address the navigation links (e.g. body#home#navigation#nav-home etc.). Also, you’ll probably give the color not a web color name but either a hex or rgb color value.