Shishir Raven

How to make a Bootstrap Menu active in a Single Page Website

—

by

Shishir Raven
in ,

Usually on an active menu we apply a slightly different style. Like look at the bootstrap example below.

Notice how the font color of home is slightly darker than the rest of the menus, indicating how it is an active menu.

Now in bootstrap this is done by adding a active class to that menu.

In a Single Page Application(SPA) you can apply this active class to the current section by the use of Jquery.

Jquery is by default included in any bootstrap project but if you are using something other than bootstrap you may include it.

( Note :It’s not necessary that you use jQuery to achieve this and this can be done using plain Javascript also but for example we would put jQuery to use. )

The following is the Strategy we will use.

  1. On click of any ‘nav-item’ class we would remove ‘active’ class from all li.nav-item elements
  2. We will add ‘active’ class to current .nav-item.

Here is how we will code it for bootstrap menu. 

$(".nav-item").on("click", function(e){
  // Remove class active form all li.nav-tiem
  $("li.nav-item").removeClass("active");
  // Add Class to current Element. 
  $(this).addClass("active");
});

That’s it. This will get our job done. ?

Comments

Leave a Reply