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:

<nav>
	<ul>
		<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>
	</ul>
</nav>	

And you are at the URL:

http://yoursite.com/about/team/

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).

Comments

  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.

  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#

    Hi,

    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#

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

  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…

    Thanks,
    Luke

  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?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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