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).
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.
Pure Javascript:
cool!!!
Another way:
This is the correct, alternative version based on the innerText URL:
`
function setNavigation() {
let current_location = location.pathname.split(‘/’)[1]
if (current_location == ”) {
current_location = ‘home’
}
}
setNavigation()
`
Thanks for every things
Danke Chris! Simple, clear and slick. High five!
Thanks! Been looking for something like this for a while now :)
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.
Simple fix: Don’t use the script on the home page file. Duh. :)
Try replacing the hrefˆ= with href$=
ˆ= value begins with
$= value ends with
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.
I don’t have “/” in my navigation, so the code added “active” class to all my links on the home page. In my case, I did the following so my “/” path doesn’t run the code:
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?
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’);
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');
Hi,
I am a newbie here, can you please provide a working example ?
Thanks.
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
Chris, can you provide a small demo for this?
Yes This is Useful…..
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.
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?
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 https://github.com/Vitaa/ActiveNavigation
works like a charm Thanks a lot!
Hello!
I found a routine to set active (current) class on my shared menu, but I need to modify it to set the parent link only, and not the ‘closest’ link. It works great on menu items with no sub menus, but when a sub menu item is clicked, there is not indication on the main menu after page load. (the code I need to modify is below)
Any chance you could show how to do this in the PHP please?
TKX
Vita
Quick update not sure if its been said, but if your looking to use this as well as keep a home link as a “/”
Just do something to differentiate your home li or a tag, like in the else.
Thank you so much for sharing this! helped me a lot ;)
Great Respect! Very helped me!
I have this solution with vanilla JS and I have a problem. The hash(#) in the url changes slower than the active clases. So I click on the first link and nothing happends, then I click on the second one and the first one got the active class.
Hi,
I have a reverse situation.
What if don’t want the parent menu to be highlighted when its child (submenu item ) is active?
Eg:
About us – No color
– Link 1
– Link 2 (Currently active) : want it in some color
Any clue ?
Many thanks
Hey try this one.
Hey i try this peace of codes and its working great for me…
Thank you Aryan. Your code works very well for me.
It worked !! Thank you for your share
Great post and tip. I’ll leave my contribution here. For those who are having problems matching URLs with parameters, here’s the solution (the code is adding the CLASS to the parent LI tag and not the A tag as the original post):
$(function() {
var url = window.location.href; url = url.replace(/^.*\/\/[^\/]+/, ”);
$(‘nav a[href$=”‘ + url + ‘”]’).closest(‘li’).addClass(‘active’);
});
a shorter syntax (in that case I apply the active class to li, not a) :
let loc = location.pathname.split(“/”)[1];
document.querySelector(‘nav a[href^=”/’ + loc + ‘”]’).closest(‘li’).classList.add(‘active’);
Or, you could do something along these lines:
Hi Chris,
I have a menu where all the links are unique domain names. I am using a similar method to yours which works great:
But my problem is, this works if the address bar = http://www.mysite.com, but it doesn’t work if the address bar = mysite.com/cat/ for example.
I need my method to only read the domain name and ignore anything after it.
Any ideas?
jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split(“/”).pop();
// Account for home page with empty path
if ( path == ” ) {
path = ‘index.php’;
}
var target = $(‘nav a[href=”‘+path+'”]’);
// Add active class to target link
target.addClass(‘active’);
});