0
(0)

Add Active Navigation Class Based on URL

Let’s take an example.

You have a menu something 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 on the About page where your URL is: https://yoursitename.com/about

Write the following Jquery to display active menu.

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

Jquery find the active page URL and add the active class to the <a> tag.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Share this post on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?