How to Highlight the Menu Item of the Current Page in Drupal

One of our customers asked how to highlight an active menu item in Drupal and how to keep it highlighted once it has been clicked.

In this tutorial, you will learn how to achieve this goal using the “Menu Trial by Path” and “Pathauto” contrib modules.

In this example, we’re going to use a site that has a main menu with different regions e.g. Alaska, California, Pacific. There is also a secondary menu, customized for each geographical region. So we have the following URL structure:

• example.com/regions/alaska (Main Navigation)
• example.com/regions/alaska/al-link-1 (Secondary Navigation)

The customer wants the menu item in the main navigation to remain highlighted. To make this happen, the menu item must keep the “active” class, even if a secondary menu has been clicked.

The Menu Trail by Path module will allow you to do just that. It sets the active-trail on menu items according to the current URL.

In this tutorial, you’re going to recreate this scenario with the help of the “Pathauto” module and after that, the “Menu Trail by Path” module will do the rest of the job.

Step #1. Create the Content Types

• Click Structure > Content Types.
• Click Add content type:

• Create a content type called Regions, this node will be accessible through the main navigation of the site.
• Click Save and manage fields:

• Repeat the process and create a content type called Alaska Region Content. These nodes will be accessible through the secondary menu available within “Alaska”:

• Click Content > Add content > Region.
• Create three Region nodes e.g. Alaska, California, Pacific.
• Click Content > Add Content > Alaska Region Content.
• Create three Region Content nodes ie. AL Link 1, AL Link 2, AL Link 3:

Step #2. Configure the Menu Structure

• Click Structure > Menus.
• Edit the Main Navigation Menu:

• Add links for each one of your recently created Region nodes.
• Click Save and repeat the process so many times as needed:

• Edit the menu once again, rearrange the menu items and click Save:

• Click Add menu, in order to create the secondary menu:

• Give your menu a proper name for each one of the available geographical regions.
• Click Save:

• Repeat the process of adding links to this menu, just like you did with the main navigation menu. This time, you’ll link to the Alaska Region Content nodes:

Step #3. Configure the URLs

The best way to configure SEO friendly URLs with a predefined pattern is with the help of the Pathauto module. Use your preferred method for installing it. I’m using Composer:

composer require drupal/pathauto

• Click Extend and search for the module in order to enable it:

• Click Configuration > URL aliases:

• Select the Patterns tab.
• Click Add Pathauto pattern:

• Use the available tokens widget to configure the URL pattern for the Regions content type:

[node:content-type]/[node:title]

• Repeat the process for the Alaska Region Content content type with this URL pattern:

regions/alaska/[node:title]

• Click the Bulk generate tab.
• Select the Content checkbox.
• Select Regenerate URL aliases for all paths, please remember that I’m using a sandbox installation for this example and all the content is new, don’t do this on a production server. Check instead the other available options.
• Click Update:

• Refresh the cache of your browser in case you don’t see the regenerated URLs.

Step #4. Place the Secondary Menu Block

• Click Structure > Block layout.
• Scroll down to the Primary theme region.
• Click Place block:

• Look for your custom secondary menu.
• Click Place block:

• Uncheck Display title in the Block configuration modal.
• Select the vertical tab Pages.
• Add the following paths:
  • /regions/alaska
  • /regions/alaska/*
• Click Save block:

If you navigate to yoursite/regions/alaska/al-link-1, you’ll be able to see the custom menu on the left sidebar (Primary), but the “higher-level” item on the main menu has lost the active state:

Step #5. Install the Menu Trail by Path module

• Download and enable the module with your preferred method:

composer require drupal/menu_trail_by_path

• Navigate to yoursite/regions/alaska/al-link-1 once again. The menu item Alaska has an active state now.

This way, you could “highlight” any menu item depending on the URL of the node you’re viewing, you could visually associate thousands of nodes to a menu item if you would have to.

That is the real flexibility provided by this module!

Step #6. CSS for the Secondary Menu

You can add styles to these items by using the .menu–your-own-menu class in the style.css file within your subtheme. For example:

/* Link styles for the secondary menu of Region "Alaska" */
.menu--secondary-menu-alaska a {
width: 70%;
margin: auto;
text-align: center;
color: #333;
font-weight: 900;
border-radius: 3px;
}
.menu--secondary-menu-alaska a:hover {
color: #333;
}
.menu--secondary-menu-alaska a.is-active {
background-color: darkorange;
color: #50457b;
}