Code Bytes
Highlight the current navigation link with JavaScript
Match same-site navigation paths with native JavaScript and mark the current page with an active class and aria-current.
Show people where they are
A navigation link should make the current page recognisable visually and to assistive technology. If your template already knows the current route, render the active state there. For a small static site, this native JavaScript version is useful too.
The example
<nav aria-label="Main" data-main-nav>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/work/">Work</a>
</nav>
Run this from a deferred JavaScript file, after the navigation exists:
function pagePath(path) {
return path.replace(/\/+$/, '') || '/';
}
const current = new URL(window.location.href);
for (const link of document.querySelectorAll('[data-main-nav] a[href]')) {
const target = new URL(link.getAttribute('href'), current);
const active = target.origin === current.origin
&& !target.hash
&& pagePath(target.pathname) === pagePath(current.pathname);
link.classList.toggle('is-active', active);
if (active) link.setAttribute('aria-current', 'page');
else link.removeAttribute('aria-current');
}
[data-main-nav] a[aria-current="page"] {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.25em;
}
Adapt it to your routes
This treats /work and /work/ alike and ignores tracking queries. It deliberately does not mark an external link, a section fragment, or /workshop/ as the current /work/ page. If your application uses query parameters to identify different pages, include those in the comparison instead of discarding them.
For a highlighted parent section, match an exact path or its slash-delimited descendants—not a loose substring. A client-side router must rerun the check after navigation. Without JavaScript, the links still work; server-rendered aria-current avoids waiting for the script at all.
References: URL API and aria-current.
Original version18 January 2016
Kept here for reference and earlier links. The updated guide above is the recommended starting point; older code may depend on retired services or different software versions.
A very common feature of sites is a subtle design change to the website menu to indicate the current page the user is on, usually by adding an underline to the menu item of the menu bar.
This can be done in multiple ways, however this JavaScript / jQuery code I have found to be the most performant over the years:
// url, so we can compare the current page the user is on.
var url = window.location.href;
// myMenuLinks, set this to your site's a links inside of some kind of container/loopable structure.
var myMenuLinks = $('#menu a');
myMenuLinks.filter(function() {
return this.href == url;
}).addClass('active'); // Adds a class of 'active', directly to the 'a' link
There's also another version if you're looking to add class of active to menu with PHP
Keep exploring