The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Add Active Navigation Class Based on URL

Last updated on:

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. Mike
    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. Leon Gaban
    Permalink to comment#

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

  5. Don
    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. :)

    • Michel
      Permalink to comment#

      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…


    • ArtyPea
      Permalink to comment#
      $(function() {
          var nav = document.getElementById("sticky"),
              anchor = nav.getElementsByTagName("a"),
              current = window.location;
          console.log("anchor = ",anchor,"current = ",current);
          for (var i = 0; i < anchor.length; i++) {
          if(anchor[i].href == current) {
              anchor[i].className = "active";
  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

  15. Jonno

    Any chance you could show how to do this in the PHP please?

  16. George v
    Permalink to comment#


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed