JavaScript - Add active Menu or Navigation class based on URL

Photo by Christopher Gower on Unsplash

As a front-end developer, I created this post to share my experience and thoughts about this topic. As beginner you will also experience how to add an active Menu or Navigation class based on URL.

So i'm going to share what I did to solve this problem.

First I did a lot of research, thanks to google by the way; without further a do, code below are provided and let me explain my small thoughts about this.

Javascript Code

var url = window.location.href;
var page = url.substr(url.lastIndexOf('/') + 1);
if (page) {
$('#menu_holder li [href="' + page + '"]').addClass('link_active');
} else if (page) {
$('#menu_holder li [href=!"' + page + '"]').addClass('link_active');
} else {
$('#menu_holder li:first').addClass('link_active')
}code-box

HTML Code

<ul class="menu_hen" id="menu_holder">
<li class="menu_chicks"><a href="?varx=games">Home</a></li>
<li class="menu_chicks "><a href="?varx=videos">Videos</a></li>
<li class="menu_chicks"><a href="?varx=tones">Tones</a></li>
<li class="menu_chicks"><a href="?varx=apps">Apps</a></li>
</ul>code-box

CSS Code

.link_active{
background:#fff;
}
.menu_hen {
list-style: none;
padding: 0;
}
.menu_chicks {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
.menu_chicks a img {
padding: 2rem;
}code-box

Javascript code explanation;

First, I've declared the url variable and store the url address of my website. 

var url = window.location.href;code-box

Ex. www.bloggersph.com/alert-success
Second, I've declared another variable page and store the default index url with forward slash (/) and added the increment value (+1) in it;

var page = url.substr(url.lastIndexOf('/') + 1);code-box

meaning, the increment value (+1) will get the page value you might selected. 

ex. www.bloggersph.com/videosalert-success

Then, I've declared an IF statement which now holds the current URL of the page you've been selected.

Let say; default page is equals to www.bloggersph.com/; by default, home page will contains an active class.

If page URL is equal (=) to www.bloggersph.com/videos, or equal to www.bloggersph.com/tones, or equal to www.bloggersph.com/apps, the clicked menu will now contains an active class .link_active

if (page) {
$('#menu_holder li [href="' + page + '"]').addClass('link_active');
}code-box

Else if, page URL is not equal (!=) to www.bloggersph.com/videos, or not equal to www.bloggersph.com/tones, or not equal to www.bloggersph.com/apps,  your home page which is www.bloggersph.com will contain an active class .link_active 

else if (page) {
$('#menu_holder li [href=!"' + page + '"]').addClass('link_active');
}code-box

Else, your home page contains an active class .link_active; 

This means that, if page is equals (=) to www.bloggersph.com/, your home page default link will contain an active class .link_active

else {
$('#menu_holder li:first').addClass('link_active')
}code-box

Thank you for taking time to read this published article, and please submit a comment down below if you sincerely like the content.

You can also follow me on social media(s) for more updates.