Add a CSS class on a current active menu item

With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS.


    $(function() { // Document Ready

    // Functions
    // @link
function activeMenu() {

    var url = window.location.pathname, 
        // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
        // now grab every link from the navigation
        $('.menu a').each(function(){ // Swap to your menu CSS Class or ID
            // and test its normalized href against the url pathname regexp
                $(this).addClass('current'); // Add CSS Class 'current' to active link tag


Enqueue the script and target your menu to where you need the current active menu item to have the CSS class.


  1. Yan BERN on March 4, 2021 at 11:03 pm

    Hi, for the ‘li’ element, we need to walk the DOM to test the href attribut.

    jQuery(‘.menu li’).each(function(){


  2. Rowlan on July 2, 2020 at 5:07 pm


    Is there a way to apply the .addClass(‘current’) to the ‘li’ and not the ‘a’?

    Great method BTW.

    • Neil Gowran on July 10, 2020 at 3:29 am

      Change the jQuery selector to be $('.menu li')

Leave all Comment