Add active class to current page navigation link

Question

Hi I need help making my navigation show the active link highlighted on current page. In other words when I click on a link to go to a new page I want to see that link highlight

Answer 1

To do this, you'd need to be able to compare some unique element in each link with some other unique element of the page (such as the URL).

Looking at what you have, you might be able to get away with comparing the URLs. You'd have to grab the current' page's location, parse the URL to get the file name (last part of the URL after the last /) and then go through each href of your navigation, parse each one of those, then make a comparison. If there's a match, add a class to that link.

The catch with this is that this isn't the most performant way to handle it. The other issue is if you happen to have two pages on the site with the same file name (which isn't unheard of).

I think uniquely identifying each page with a unique class in the BODY tag is probably the best way to handle it.

So, perhaps your body tag is:

And then add a class to your navigation:

Contact us

Then you'd have a block of CSS that will set these on a per-page basis:

.page-contactus .link-contactus {[add active style]}
.page-home .link-home {[add active style]}
.page-etc .link-etc {[add active style]}