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

Highlight a Menu Item of the Current Page

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.

Highlighted menu item
Highlighted menu item

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:
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:
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”:
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:
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:
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:
Click Save and repeat the process so many times as needed
  • Edit the menu once again, rearrange the menu items and click Save:
Edit the menu once again, rearrange the menu items and click Save
  • Click Add menu, in order to create the secondary menu:
Click Add menu
  • Give your menu a proper name for each one of the available geographical regions.
  • Click Save:
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:
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

I’m using Composer
  • Click Extend and search for the module in order to enable it:
Click Extend and search for the module in order to enable it
  • Click Configuration > URL aliases:
Click Configuration and then URL aliases
  • Select the Patterns tab.
  • Click Add Pathauto pattern:
Click Add Pathauto Pattern
  • Use the available tokens widget to configure the URL pattern for the Regions content type:

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

Use the available tokens widget
  • Repeat the process for the Alaska Region Content content type with this URL pattern:

regions/alaska/[node:title]

Repeat the process for the Alaska Region Content
  • 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:
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:
Click Place block
  • Look for your custom secondary menu.
  • Click Place block:
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:
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:

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

composer command
  • Navigate to yoursite/regions/alaska/al-link-1 once again. The menu item Alaska has an active state now.
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;
}
Add styles
Add styles

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dalin
Dalin
6 years ago

Another option would be to use one menu with two levels of hierarchy, and two menu blocks, the second of which only shows the second layer (and deeper) of the menu. Then set pathauto to use the menu trail. This technique might be more straightforward for content editors.

Dalia
Dalia
5 years ago

Hey! 🙂
This looks really good! But maybe by any chance you know how to implement that on twig? My menu is custom, it is written in twig template so I am not using Drupal menu by default. I tried to add “.active” class with jquery, but I did not succeeded

2
0
Would love your thoughts, please comment.x
()
x