Highlighting Menu Items

Sometimes the design will call for the specific page, or just its overall menu category, to be “highlighted” within the menu–this could mean anything from a simple color change to having a caret or some more intense styling.

How To

HTML

The key to this is having {{page.category}} in your subpage’s body tag. If youo’re testing locally, you can use <!-- @if NODE_ENV!='production' --> Your Category Here <!-- @endif --> to test.

Script - scripts.js

Here is an example of how to highlight only the active category. Note the syntax–it searches for any class BEGINNING with that. This means it also works for classes like Personal Banking/Checking, or any other classes with a slash on the last word of a multi-word supercategory.

if($('body').is('[class*="Personal"]')) {
	$('header.header .banno-menu > li > a').each(function() {
    	if($(this).text() === "Personal") {
        	$(this).addClass('activeNavItem');
      	}
    });
} else if ($('body').is('[class*="Business"]')) {
    $('header.header .banno-menu > li > a').each(function() {
      	if($(this).text() === "Business") {
        	$(this).addClass('activeNavItem');
      	}
    });
} //repeat with as many categories as needed

Here is an example of how to highlight the active category, AND the active page within that. Put the script into the large function in your scripts.js file. Starting with the category set in your body, it uses the script to determine which menu item has the matching text, and sets an active class on it. The example below also includes a drill-down into the dropdown, wihch then highlights the current page’s link within that dropdown.

// Set active on navbar
if($('body').hasClass('Personal Banking')) { 
  	var highlightItem     = $('header.header .banno-menu > li .dropdown-toggle:contains("Personal Banking")'),
      	highlightItemDD   = highlightItem.siblings('.dropdown-menu'),
      	highlightItemLink = highlightItemDD.children('li').children('a'),
      	windowloc = window.location.pathname;
  	highlightItem.addClass('highlightedMenuItem');
  	highlightItemLink.each(function() {
    	var href = $(this).attr('href');
    	if (windowloc === href) {
      		$(this).addClass('activePage');
    	}
  	});
} else if ($('body').hasClass('About Us')) { //make as many else-ifs as needed for the categories you have. This example also targets the footer links.
  	var highlightCategory   = $('header.header .banno-menu > li .dropdown-toggle:contains("About Us")'),
      	highlightItemDD     = highlightCategory.siblings('.dropdown-menu'),
      	highlightItemLink   = highlightItemDD.children('li').children('a'),
      	highlightFooterLink = $('footer.footer .banno-menu > li .dropdown-menu li a');
      	windowloc = window.location.pathname;
  	highlightCategory.addClass('highlightedMenuItem');
  	highlightItemLink.each(function() {
    	var href = $(this).attr('href');
    	if (windowloc === href) {
      		$(this).addClass('activePage');
    	}
  	});
  	highlightFooterLink.each(function() {
    	var href = $(this).attr('href');
    	if (windowloc === href) {
      		$(this).addClass('activePage');
    	}
  	});
}

Styling

You can use the classes above to target the active item, and style them as needed.

Example Sites

• United Bank of Michigan (highlights active category)
• Millennium Bank (highlights active page as well as active category)

Tags: menu, bs2, bs3, bs4, script, js, jquery, javascript, html, scss, sass, breadcrumbs