Highlight current page menu item with jQuery

By highlighting the current page navigation menu item helps the users to know, at what page they are now.

You can simply do this with jQuery, to highlight menu item according to the current page.

Without submenu
With submenu
Conclusion

In this example, I am creating a basic menu layout that has a few menu items.

HTML

Creating menu items using <ul> <li> elements.

<ul class='menu'>
  <li><a href="index.html">Home</a></li>
  <li><a href="javascript.html">JavaScript</a></li>
  <li><a href="blog.html">Blog</a></li>
</ul>

CSS

/* Menu */
.menu {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: darkturquoise;
}

.menu li {
 float: left;
}

.menu li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

.menu li ul{
 display: none;
}

.menu li a:hover {
 background-color: #2b90f5;
}

.active{
 background: #2b90f5;
}

jQuery

On the document ready state gets the current page URL and filter filename from it in 3 steps –

Remove # value if there is.
Remove parameters if there is.
Extract file name.

If the file name is empty then set index.html as a default value.

Loop through all menu items and check the filename in it. If a filename matched then add the active class.

$(document).ready(function() {

  // Get current page URL
  var url = window.location.href;

  // remove # from URL
  url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

  // remove parameters from URL
  url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

  // select file name
  url = url.substr(url.lastIndexOf("/") + 1);
 
  // If file name not avilable
  if(url == ''){
     url = 'index.html';
  }
 
  // Loop all menu items
  $('.menu li').each(function(){

     // select href
     var href = $(this).find('a').attr('href');
 
     // Check filename
     if(url == href){

        // Add active class
        $(this).addClass('active');
     }
  });
});

View Demo

2. With submenu

I am extending the above example, by adding submenu items.

HTML

Creating menu and sub-menu items using <ul> <li> elements.

<ul class='menu'>
 <li><a href="index.html">Home</a></li>
 <li><a href="javascript.html">JavaScript</a>
  <ul class='submenu'>
   <li><a href="angular.html">AngularJS</a></li>
   <li><a href="jquery.html">jQuery</a></li>
   <li><a href="react.html">React JS</a></li>
  </ul>
 </li>
 <li><a href="blog.html">Blog</a></li>
</ul>

CSS

/* Menu */
.menu {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: darkturquoise;
}

.menu li {
 float: left;
}

.menu li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

.menu li ul{
 display: none;
}

.menu li a:hover {
 background-color: #2b90f5;
}

.active{
 background: #2b90f5;
}

/* sub menu */
.submenu{
 position: absolute;
 list-style: none;
 color: black;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 padding-left: 0;
}

.submenu li{
 width: 100%;
 float: none;
}
.submenu li a{
 color: black;
}
.submenu li a:hover{
 background-color: #ddd;
}

.menu li:hover .submenu{
 display: block;
}

.subactive{
 background: #ddd;
}

jQuery

Similar to the first example, extract the filename from the current page URL and looping on .menu li elements.

If the file name matched with the menu item then check the element parent class if it is equal to submenu then add subactive class and again select parent of the menu item to add the active class to it.

$(document).ready(function() {

  // Get current page URL
  var url = window.location.href;

  // remove # from URL
  url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

  // remove parameters from URL
  url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

  // select file name
  url = url.substr(url.lastIndexOf("/") + 1);
 
  // If file name not avilable
  if(url == ''){
     url = 'index.html';
  }
 
  // Loop all menu items
  $('.menu li').each(function(){

     // select href
     var href = $(this).find('a').attr('href');

     // Check filename
     if(url == href){

        // Select parent class
        var parentClass = $(this).parent('ul').attr('class');
 
        if(parentClass == 'submenu'){
 
           // Add class
           $(this).addClass('subactive');
           $(this).parents('.menu li').addClass('active');
        }else{

           // Add class
           $(this).addClass('active');
        }
 
     }
  });
});

View Demo

3. Conclusion

Using the above script you can automatically highlight navigation menu items with jQuery whenever the page load.

Customize the script according to the complexity of menu items.

If you found this tutorial helpful then don't forget to share.

Contents

1. Without submenu

2. With submenu

3. Conclusion