Log in Sign Up

currentPage: A jQuery plugin to add "current" to nav links

Updated December 21, 2011

One of the most effective ways of managing your HTML is to use server side includes (SSI) for blocks of HTML that are reused across many pages of your site. Using an include for your navigation menu in particular is a great idea, since updating links when you add a new page can be done in only one file and propagate instantly across your whole site.

From a design and usability perspective, though, it's often a good idea to highlight the current page in your navigation so visitors have some indication of the page they are on. This is often done by adding a class to the anchor tag like this:

<ul class="nav">
  <li><a href="/">Home</li>
  <li><a href="resources.html" class="current">Resources</li>
  <li><a href="news.html">News</li>
  <li><a href="about.html">About Us</li>
  <li><a href="blog.html">Blog</li>
  <li><a href="contact.html">Contact Us</li>
</ul>

Of course, you would also add a different style in your CSS that would highlight the current link. If you consider adding the "current" class a progressive enhancement, then this solution is for you. If JavaScript is turned off the user could still easily navigate the site, but will simply not see the current page as highlighted.

A basic way to do this can be found on the jQuery site here, but this plugin is a bit more flexible in its application.

Enabling the Plugin

Download the plugin (below) and upload it to your site, then add it to the head of each page (preferably using SSI). Here is an example of how you might implement it:

<head>
  ...
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.currentPage.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("a").currentPage();
    });
  </script>
  ...
</head>

This will add the class="current" to any link that matches the URL of the current page. To narrow the scope you could use something like $("ul.nav a").currentPage(), for example.

Using Options

The plugin allows you to pass in an options object. Here are the defaults:

{
  defaultClass: "current",
  attr: "href",
  appendToFirstClass: false,
  indexFile: "index.html"
}

To override the defaults, pass in a new defaults object with any updated options. For example, if you wanted to use class="selected" instead of the default class="current", and all links to your home page use "index.html", use this:

  <script type="text/javascript">
    $(document).ready(function() {
      $("a").currentPage({
        defaultClass: "selected",
        indexFile: "index.html"
      });
    });
  </script>

Options

defaultClass

Default value: "current"

The class that will be added to links that are detected as pointing to the current page.

appendToFirstClass

Default value: false

This is particularly useful if you are using a single image sprite for a series of navigation buttons and simply moving the sprite around to change the background of a link.

Suppose you have class="monkey navItem" set on a link. With the default set to false, the result for the current page would be class="monkey navItem current".

With appendToFirstClass: true set, the result for the same example would be class="monkey navItem monkeycurrent", which would allow you to set up your CSS specifically for that item.

indexFile

Default value: "index.html"

When you first hit a website, the index (or default) page is not shown in the URL. However, you still want the "Home" link in your navigation to be highlighted. The same is true for a link to a subfolder that does not link to a specific file in that subfolder. The web server will look for a file of a particular name (such as index.html or default.html) and serve up that file. Similarly, the currentPage script needs to be configured with the name of your default file.

If the URL of the current page does not include a file name (ends in "/" or is just the base URL), this plugin will still highlight links on the page if they match the indexFile setting. Therefore, if you use something like "default.html" instead of "index.html", make sure you change the default accordingly by using indexFile: "default.html". Make sure you are using the same default file name on all subfolders as well.

Demo

View demo

Revision History

Version 1.1

First public release.

Version 1.2

Resolved an issue with incorrect match when an href matched only part of the current page's URL.

Version 1.3

Updated to support jQuery 1.6. Resolved issue with multiple "current" links on the same page.

Version 1.4

Minor tweaks.

Version 2.0 (current)

Major rewrite that supports more use cases and deprecates some options that are no longer necessary.

Downloads

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top