Add Active Navigation Class Based on URL

Question

I'm trying to add an active class (i.e. class="active") to the appropriate menu list item based upon the page it is on once the page loads. Below is my menu as it stands right now. I've tried every snippet of code I could find in this regard and nothing works. So, can someone please explain simply where and how to add in javascript to define this task?

<ul id="nav">
    <li id="navhome"><a href="home.aspx">Home</a></li>
    <li id="navmanage"><a href="manageIS.aspx">Manage</a></li>
    <li id="navdocso"><a href="docs.aspx">Documents</a></li>
    <li id="navadmin"><a href="admin.aspx">Admin Panel</a></li>
    <li id="navpast"><a href="past.aspx">View Past</a></li>
</ul>

Here is an example of the javascript that I'm putting in my head tag in my site master. What am I doing wrong?

$(document).ready(function () {
    $(function () {
        $('li a').click(function (e) {
            e.preventDefault();
            $('a').removeClass('active');
            $(this).addClass('active');
        });
    });
});

Not related to OP But for simple use cases with Bootstrap 4 $(function () { $(`.nav-link[href="${location.pathname}"]`).parent().addClass("active"); }); — Givi
– Givi, Commented Apr 12, 2020 at 7:29

Rob M. · Accepted Answer · 2013-11-19 00:02:20Z

82

The reason this isn't working is because the javascript is executing, then the page is reloading which nullifies the 'active' class. What you probably want to do is something like:

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

There are some cases in which this won't work (multiple similarly pointed links), but I think this could work for you.

answered Nov 19, 2013 at 0:02

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

slybitz Over a year ago

Thank you. Using this as well as adding a "/" to the front of my links (e.g. /home.aspx vs home.aspx) corrected the issue.

mjcoder Over a year ago

@RobM. what if you have a ul within a ul - how would you set the active class on the top level link?

Rob M. Over a year ago

@MJCoder $this.parents('.target-parent-selector').addClass('active')

mjcoder Over a year ago

@RobM. any chance of a JSFiddle?

Funto Adeyemi Over a year ago

@MJCoder with this code, it is setting active to the link tag, how do you get it to set active to a class in the li tag

|

Figar Ali · Accepted Answer · 2015-12-31 13:40:45Z

27

    jQuery(function($) {
     var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
     $('ul a').each(function() {
      if (this.href === path) {
       $(this).addClass('active');
      }
     });
    });

.active, a.active {
    color: red;
}
a {
    color: #337ab7;
    text-decoration: none;
}
li{
    list-style:none;
}

<h3>Add Active Navigation Class to Menu Item</h3> 

    <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/about/">About</a></li>
    </ul> 

<h2><a href="http://www.sweet-web-design.com/examples/active-item/active-class.html">Live Demo</a></h2>

answered Dec 31, 2015 at 13:40

Figar Ali

8661 gold badge10 silver badges18 bronze badges

Comments

Panagiotis Koursaris · Accepted Answer · 2020-09-29 07:05:05Z

18

With VANILLA plain JavaScript

(function () {
    var current = location.pathname.split('/')[1];
    if (current === "") return;
    var menuItems = document.querySelectorAll('.menu-item a');
    for (var i = 0, len = menuItems.length; i < len; i++) {
        if (menuItems[i].getAttribute("href").indexOf(current) !== -1) {
            menuItems[i].className += "is-active";
        }
    }
})();

edited Sep 29, 2020 at 7:05

answered Oct 9, 2019 at 16:24

Panagiotis Koursaris

4,0534 gold badges29 silver badges49 bronze badges

1 Comment

SeRosiS Over a year ago

Works perfectly except it removes all existing classes in the 'a' element in favor of "is-active". To work around this I changed line 7 in your snippet to menuItems[i].className += " is-active"; which seems to have done the trick.

Sergey Bezugliy · Accepted Answer · 2018-06-03 13:55:52Z

6

ES6 version, that works properly in cases when your link is to "/products" and you have subroutes, like: "/products/new", "/products/edit", etc.

let switchNavMenuItem = (menuItems) => {

    var current = location.pathname

    $.each(menuItems, (index, item) => {

        $(item).removeClass('active')

        if ((current.includes($(item).attr('href')) && $(item).attr('href') !== "/") || ($(item).attr('href') === "/" && current === "/")){
            $(item).addClass('active')
        }
    })
}

$(document).ready(() => {   
    switchNavMenuItem($('#nav li a, #nav li link'))
})

edited Jun 3, 2018 at 13:55

answered Jun 3, 2018 at 12:53

Sergey Bezugliy

6927 silver badges24 bronze badges

1 Comment

Eric Hepperle - CodeSlayer2010 Over a year ago

Is this really ES6? Looks like jQuery still (e.g., $(document) is not ES6`

Vitor de Sousa · Accepted Answer · 2019-04-30 03:02:22Z

3

If your menu need add the active class in li, you need use this code above.

$(function($) {
  let url = window.location.href;
  $('nav ul li a').each(function() {
    if (this.href === url) {
      $(this).closest('li').addClass('active');
    }
  });
});

answered Apr 30, 2019 at 3:02

Vitor de Sousa

13111 bronze badges

Comments

Networker · Accepted Answer · 2019-08-20 07:52:13Z

3

None of the above solutions worked for me. Finally this javascript solution worked.

<script>
function setActive() {
  linkObj = document.getElementById('premier-topnav').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    if(document.location.href.indexOf(linkObj[i].href)>=0) {
      linkObj[i].classList.add("active");
    }
  }
}

window.onload = setActive;
</script>

premier-topnav is the id of navbar div.
.active class is defined as:

#premier-topnav .active {
    color: brown;   
}

answered Aug 20, 2019 at 7:52

Networker

412 bronze badges

2 Comments

Adam Over a year ago

Better use document.location.pathname === linkObj[i].getAttribute('href') otherwise you will have hard time to deal with the home page.

ironixx Over a year ago

Thank you for this answer. I'm learning JS and spent few hours to get some results but thanks to your snippet I could find a right direction. @Adam could you please explain your suggestion?

Softec · Accepted Answer · 2021-07-05 22:10:50Z

3

This should do your job in one liner.

document.querySelector(`a[href^='${location.pathname.split('/'[1])}']`).className = 'active'

edited Jul 5, 2021 at 22:10

Softec

1239 bronze badges

answered Jul 19, 2019 at 3:49

user9342337

312 bronze badges

Comments

A.moizRiaz · Accepted Answer · 2018-10-12 12:54:24Z

2

$(function() {
    var CurrentUrl= document.URL;
    var CurrentUrlEnd = CurrentUrl.split('/').filter(Boolean).pop();

    $( ".top-menu li a" ).each(function() {
          var ThisUrl = $(this).attr('href');
            var ThisUrlEnd = ThisUrl.split('/').filter(Boolean).pop();
            if(ThisUrlEnd == CurrentUrlEnd)
            $(this).addClass('active')
        });
    });

answered Oct 12, 2018 at 12:54

A.moizRiaz

313 bronze badges

Comments

Abdel · Accepted Answer · 2019-06-28 11:30:13Z

2

This on page JS code is a 100% working put your id and enjoy it.

   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
   <script>
   $(document).ready(function() {

            var CurrentUrl= document.URL;
            var CurrentUrlEnd = CurrentUrl.split('/').filter(Boolean).pop();
            console.log(CurrentUrlEnd);
            $( "#lu-ID li a" ).each(function() {
                  var ThisUrl = $(this).attr('href');
                  var ThisUrlEnd = ThisUrl.split('/').filter(Boolean).pop();

                  if(ThisUrlEnd == CurrentUrlEnd){
                  $(this).closest('li').addClass('active')
                  }
            });

   });

answered Jun 28, 2019 at 11:30

Abdel

211 bronze badge

1 Comment

Jawad Anwar Over a year ago

This worked like a charm for me, thumbs up. Thank you!

Ankit Tiwari · Accepted Answer · 2022-04-28 10:28:16Z

2

I know this is late answer but this works ok for me

var links = document.querySelectorAll('li a');

for (link of links) {
    if (window.location.pathname == link.getAttribute('href')) {
        link.classList.add('active')
    } else {
        link.classList.remove('active')
    }
}

answered Apr 28, 2022 at 10:28

Ankit Tiwari

4,7654 gold badges20 silver badges49 bronze badges

Comments

user6274097 · Accepted Answer · 2016-04-30 04:45:47Z

1

var cururl = window.location.pathname;
var curpage = cururl.substr(cururl.lastIndexOf('/') + 1);
var hash = window.location.hash.substr(1);
if((curpage == "" || curpage == "/" || curpage == "admin") && hash=="")
{
//$("nav .navbar-nav > li:first-child").addClass("active");
}
else
{
$(".topmenu li").each(function()
{
    $(this).removeClass("active");
});
if(hash != "")
$(".topmenu li a[href*='"+hash+"']").parents("li").addClass("active");
else
$(".topmenu li a[href*='"+curpage+"']").parents("li").addClass("active");
}

answered Apr 30, 2016 at 4:45

user6274097

111 bronze badge

1 Comment

Eric Hepperle - CodeSlayer2010 Over a year ago

Looks like an interesting solution. Can you please add some text to explain what this is doing? Also, what does the hash term do in this code?

Haim · Accepted Answer · 2018-09-09 12:48:16Z

1

Rob.M got it right.

I'm just going to post my solution since his didn't really work for me. i have a small change in comparison to him. assuming you have different paths to each link.

(function() {
    var current = location.pathname;
    $('#navbar ul li a').each(function() {
        var $this = $(this); 

        // we check comparison between current page and attribute redirection.
        if ($this.attr('href') === current) {
            $this.addClass('active');
        }
    });
})();

answered Sep 9, 2018 at 12:48

Haim

691 silver badge7 bronze badges

Comments

David Jones · Accepted Answer · 2019-02-06 13:40:10Z

1

This worked perfectly for me.

$(function($) {
 let url = window.location.href;
  $('nav ul li a').each(function() {
   if (this.href === url) {
   $(this).addClass('active');
  }
 });
});

answered Feb 6, 2019 at 13:40

David Jones

1063 bronze badges

Comments

Abhay Shiro · Accepted Answer · 2019-08-27 09:37:49Z

1

I know it been quite a while this question was asked. Here is the answer which will work without jQuery:

var activeNavlink = document.querySelectorAll('nav a[href^="/' + location.pathname.split("/")[1] + '"]');
activeNavlink[0].classList.add('active');

Hope this helps.

answered Aug 27, 2019 at 9:37

Abhay Shiro

3,6672 gold badges19 silver badges27 bronze badges

Comments

Dilip Kumar Choudhary · Accepted Answer · 2019-12-31 05:41:36Z

1

If you want for master page in asp .net just put this code inside body tag

 <script type="text/javascript">
    jQuery(function ($) {
        var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
        $('ul a').each(function () {
            if (this.href === path) {
                $(this).addClass('active');
            }
        });
    });
</script>

Thank you

answered Dec 31, 2019 at 5:41

Dilip Kumar Choudhary

4695 silver badges6 bronze badges

Comments

Ch Usman · Accepted Answer · 2021-05-20 08:15:44Z

1

This Does the Job Done For me... Put this before the ending of body tag

 $(function () {
        var current = location.pathname;
        console.log(current);
        if (current == "/") {
            $('#home').addClass('active'); //#home is the id for root link.
        }
        else {

            $('#navbarCollapse div a').each(function () {
                var $this = $(this);
                // if the current path is like this link, make it active
                if ($this.attr('href').indexOf(current) !== -1) {
                    $this.addClass('active');
                }
            })
        }
    })

answered May 20, 2021 at 8:15

Ch Usman

6177 silver badges10 bronze badges

Comments

Andreas · Accepted Answer · 2021-10-12 17:38:17Z

1

jQuery style:

$('a[href="'+ window.location.href + '"]').css({
  backgroundColor: 'red',
  color: 'white'
})

In first line use this if you have relative links

$('a[href="'+ window.location.path + '"]').css({

Or both

$('a[href="'+ window.location.href + '"], a[href="'+ window.location.path + '"]').css({

answered Oct 12, 2021 at 17:38

Andreas

836 bronze badges

Comments

CSJ · Accepted Answer · 2023-05-11 09:06:31Z

For dynamically adding the Active class on li tag on nav bar in the .net MVC project, where the dashboard is having only / in the url, you may try this:

HTML

<ul class="nav">
<li class="nav-item">
    <a class="nav-link" href="/">
        
        <i class="icon-grid menu-icon"></i>
        <span class="menu-title">Home</span>
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/Home/About">
        <i class="icon-monitor menu-icon"></i>
        <span class="menu-title">About</span>
    </a>
</li>
</ul>

JS

<script>
        $(() => {            
            // Get the current URL path and remove the trailing slash if it exists
            var currentPath = window.location.pathname.replace(/\/$/, '');

            // Loop through each "nav-link" element
            $('.nav-link').each(function () {
                // Get the href attribute of the link and remove the trailing slash if it exists
                var linkPath = $(this).attr('href').replace(/\/$/, '');

                // Check if the current path matches the link path
                if (currentPath === linkPath) {
                    // Add the "active" class to the parent "nav-item" element
                    $(this).closest('.nav-item').addClass('active');
                }
            });
        })
    </script>

iLuvLogix · Accepted Answer · 2019-02-06 13:00:40Z

0

$(function(){

//this returns the whole url

  var current = window.location.href;

  //this identifies the list you are targeting

  $('#nav li a').each(function(){
    var $this = $(this);

    // if the current path is exactly like this link, make it active

    if($this.attr('href') === current){

    //this takes care of ul inside a ul, it opens and make active the selected li
        $this.parents('.dropdown-menu').toggle();
        $this.css('color', 'red');
    }
  })
});

edited Feb 6, 2019 at 13:00

iLuvLogix

6,4783 gold badges30 silver badges45 bronze badges

answered Feb 6, 2019 at 12:43

Ossim Julius

1711 silver badge4 bronze badges

1 Comment

chb Over a year ago

Hi, welcome to Stack Overflow. When answering a question that already has many answers, please be sure to add some additional insight into why the response you're providing is substantive and not simply echoing what's already been vetted by the original poster. This is especially important in "code-only" answers such as the one you've provided.

Debashis Chowdhury · Accepted Answer · 2019-11-25 04:50:01Z

0

The bellow jquery script will match the manu if the page has any query string parameter as well. This script is helpful for links with nearly same name.

<script>
        //select current menu Item
        $(function () {
            var current = location.pathname.toLocaleLowerCase();
            $('.sidebar li a').each(function () {
                var $this = $(this);
                var href = $this.attr('href');
                href = href.replace(/\?.*/, "").toLocaleLowerCase();
                // if the current path is equal to this link, make it active
                if (href === current) {
                    $this.addClass('active');
                }
            })
        })
    </script>

answered Nov 25, 2019 at 4:50

Debashis Chowdhury

6648 silver badges15 bronze badges

Comments

Gcamara14 · Accepted Answer · 2020-01-31 01:46:04Z

Accessible Version:

Here's an accessible version inspired by rob.

I didn't want to run this script on the homepage so I check if it's the homepage
I check if the link matches the exact page instead of checking if it's included in the path. Or else you would get multiple items in the query.

JS

function activateCurrentPage(menuItems){
    var current = location.pathname;
    if (current !== "/") {
    menuItems.each(function(){
        var $this = $(this);
        if($this.attr('href') === current){
            $this.addClass('active');
            $this.attr('aria-current', 'page');
        }
    });
    };  
}

activateCurrentPage( $('#nav li a') );

CSS

Then for CSS don't target the active class instead target the aria attribute.

#nav a[aria-current="page"]{
   color:red;
}

Chirka · Accepted Answer · 2020-11-26 08:48:15Z

Saw somethng wth plain Javascript https://www.youtube.com/watch?v=BI3kNsTruWo&ab_channel=OnlineTutorials Put it in <script> tags after header in my Wordpress site

(function () {
  const currentLocation = location.href;
  console.log(currentLocation);
  const menuItem = document.getElementsByClassName('nav-item');
  const menuLength = menuItem.length
    for ( i = 0; i < menuLength; i++){
    if(menuItem[i].href === currentLocation){
      menuItem[i].className += " active"
    }
}

})();

        <a class="nav-item" href="/ideja/">Ideja</a>
        <a class="nav-item" href="/piesaki-sapni/">Piesaki Sapni</a>
        <a class="nav-item" href="/uznemejiem/">Uzņēmējiem</a>
        <a class="nav-item" href="/sapnu-banka/">Sapņu banka</a>
        <a class="nav-item" href="/sapnus-atbalsta/">Sapņus atbalsta</a>
        <a class="nav-item" href="/99-iedvesmas-stasti/">99 iedvesmas stāsti</a>
        <a id="lv" class="active" href="#">LV</a>
        <a href="javascript:void(0);" class="icon" onclick="openNavbar()">
            <div id="hamburger" class="hamburger "></div>
        </a>

kaioker2 · Accepted Answer · 2021-03-27 18:41:42Z

0

i was having troubles where the link to the root would light up if any page was selected when using Networker's example. this will prevent that for the root pae:

function setActive() {
  linkObj = document.getElementById('menu').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    const url = new URL(window.location.href);
    if((document.location.href.indexOf(linkObj[i].href)>=0 && linkObj[i].href != url.protocol+"//"+url.hostname+"/") || document.location.href == linkObj[i].href) {
      linkObj[i].classList.add("active");
    }
  }
}
window.onload = setActive;

answered Mar 27, 2021 at 18:41

kaioker2

3393 silver badges11 bronze badges

Comments

alv2017 · Accepted Answer · 2021-09-04 22:58:40Z

Classes can make the life a whole way easier.

css

<nav>
    <ul class="nav-list">
        <li class="nav-list-item"><a class="nav-link nav-link-active" href="index.html">Home</a></li>
        <li class="nav-list-item"><a  class="nav-link" href="about.html">About Me</a></li>
        <li class="nav-list-item"><a  class="nav-link" href="posts.html">Recent Posts</a></li>
    </ul>
</nav>

js

(function() {
    current_page = window.location.href;
    navlinks = document.getElementsByClassName("nav-link");
    active_page = document.getElementsByClassName("nav-link-active")[0];
    if (active_page) {
        active_page.classList.remove("nav-link-active");
    }

    for (i=0; i < navlinks.length; i++) {
        if (navlinks[i].href == current_page) {
            navlinks[i].classList.add("nav-link-active");
            break;
        }
    }
})();

Suraj Rao · Accepted Answer · 2022-05-13 16:21:34Z

0

Below is the solution to add the dynamic active class to the navbar elements.

// first lets get all the navbar elements.
const navElements = document.querySelectorAll(".list");
// creating a function of active navbar item 
const activeLink = (el) => {
        list.forEach((item) => {
         item.classList.remove("active");
         el.classList.add("active");
    });
 };


// attaching the event listener for each element
list.forEach((item) => {
    item.addEventListener("click", () => {
       activeLink(item)
    });
 });

edited May 13, 2022 at 16:21

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered May 13, 2022 at 16:15

Kashif Ali

3083 silver badges9 bronze badges

1 Comment

Kashif Ali Over a year ago

I faced the issue of how to add dynamically active class to links ? today so when i found the solution i thought i might help others

Collectives™ on Stack Overflow

Add Active Navigation Class Based on URL

25 Answers 25

8 Comments

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

25 Answers 25

8 Comments

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related