Why is it so hard to get the nav-bar's to apply the class of 'active'

[murday1983]

I am having major trouble trying to get any of the nav-bar's to set the class of active. I have tried Googling an answer and it appears that this functionality has cased a lot of issues in the past. Some people have never found a solution others have guessed and hacked a way of doing this. I have tried many ways and ones that have worked in the past no longer work.

Is there no way of getting an update to the nav-bar o make this functionality work a lot betted and maybe update the nav-bar section with a permanent fix.

[patrickhlauke]

what do you mean by "set the class of active"? do you mean adding a class to the link in the navbar that corresponds to the current page? if so, that's not something that the HTML/CSS/JS should do...it's up to your server-side environment (wordpress, drupal, whatever) to do.

[murday1983]

Every reply I've seen are people using JQuery/JavaScript to add the class="active" to relevant

. Not quiet sure why it should be done on the sever side though as I can't see the benefits of this.

Most people manually add the nav-bar to every page they can set the class which I think is extremely overkill and a lot of unnecessary code duplication. It should be able to be handled in one location where the nav-bar is built, in my case my Site.Master file.

Even if I create my own class it still doesn't apply it.

I just think maybe we need some sort of solid solution as if you google it you can see there are a lot of people wanting this functionality

[kkirsche]

On one hand I can understand not including it in BS core as server side is more performant. On the other hand part of me thinks Bootstrap core should include it using data attributes that include the slug pattern to match (similar to what Angular Strap does) and then applying active when that pattern is matched to allow full JS environments to quickly pick up and use the framework. Essentially all that's needed is loop over the navbar items, regex = $(this).data("permalink-regex") then if (URL_Slug).match(regex) and add the class if true

[mdo]

This isn't something we can help you with. Bootstrap is HTML, CSS, and JS. The implementation of active links—which are controlled by .active on the parent <li>s—is entirely up to you. Do it in JavaScript, jQuery, your templating language, or your backend.

[murday1983]

My fix was

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.navbar-nav a').filter(function () {
    return this.href == url;
}).parent().addClass('active');