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($){

    $(function() { // Document Ready
        
        activeMenu();
        
    });

    // Functions
    // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu
    
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
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('current'); // Add CSS Class 'current' to active link tag
            }
        });   
    }

})(jQuery);

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

Leave a Comment