Grow your CSS skills. Land your dream job.

Last updated on:

Add Active Navigation Class Based on URL

Ideally you output this class from the server side, but if you can't...

Let's say you have navigation like this:

		<li><a href="/">Home</a></li>
		<li><a href="/about/">About</a></li>
		<li><a href="/clients/">Clients</a></li>
		<li><a href="/contact/">Contact Us</a></li>

And you are at the URL:

And you want the About link to get a class of "active" so you can visually indicate it's the active navigation.

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

Essentially that will match links in the nav who's href attribute begins with "/about" (or whatever the secondary directory happens to be).


  1. Permalink to comment#

    I’ve been struggling trying to get something like this to work on a templated HTML website (server side CSS updating not available). The structure of the menu is a little more complex than your example. Would your CSS trick work for this structure? If so, PLEASE enlighten me because I’m stuck.

  2. mehdi
    Permalink to comment#

    Thanks for every things

  3. Mark Johnson
    Permalink to comment#

    Danke Chris! Simple, clear and slick. High five!

  4. Thanks! Been looking for something like this for a while now :)

  5. Permalink to comment#

    Works like a charm with one exception. One the home page the class is added to all the links. The all start with /. Any help would be appreciated.

    • Don
      Permalink to comment#

      Simple fix: Don’t use the script on the home page file. Duh. :)

    • Try replacing the hrefˆ= with href$=

      ˆ= value begins with
      $= value ends with

    • Peter
      Permalink to comment#

      This is what I did to accommodate the ‘home’ page or ‘index’.

      if (location.pathname !== '/') {
      $("a[href*='" + location.pathname + "']").addClass("current");
      } else {
      var home = document.getElementById("home").getElementsByTagName('a')[0];
      home.className = 'current';

      Hope that helps.

  6. bgdbraba

    Indeed. As well that pages that are called for example /about en /aboutsome are also both ‘active’ when you press ‘about’. Any solution for this, like a sort of exact matching?

  7. John
    Permalink to comment#


    I couldn’t get the above selector to work, but used this (php specific solution) to match the current URL.

    Hope this helps someone (haven’t thoroughly tested so might have some limitations/unexpected results).

    $(‘nav a[href=””]’).addClass(‘active’);

    • John
      Permalink to comment#

      My comment above stripped out PHP, so I will adjust, and you will have to use common sense when using it.
      $('nav a[href="<?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ? >"]').addClass('active');

  8. mlotfi
    Permalink to comment#

    I am a newbie here, can you please provide a working example ?

  9. Luke Etheridge
    Permalink to comment#

    Hi there guys – does anyone know how this is possible with the absolute url (whole url)?

    I’m sure this is an easy thing to do but I don’t really know where to start with the code…


  10. Ramesh Chowdarapally
    Permalink to comment#

    Chris, can you provide a small demo for this?

  11. Ashok
    Permalink to comment#

    Yes This is Useful…..

  12. Brian
    Permalink to comment#

    Two quick questions:

    If my url is dynamic, how should I adjust the anchor part of the javascript?
    Is there a pure css method for the active state shown above? Just thought i’d ask. I would use the hover effect for non-js viewers in case anyone should want to know.

  13. Wesley
    Permalink to comment#

    My situation is similar but different. I need to target a specific nav element with the active class when a non-child document is active. Any ideas on how to do this?

  14. Vita
    Permalink to comment#

    I implemented a slightly different approach. I try to find the best match for the url and current location. Created a jQuery plugin for this

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".