Get a menu item highlighted while viewing a node based on the same URL path

Add class 'active-trail' to a menu item if the item and a node being viewed have common URL paths. This is to indicate that the node is a child of the menu item.
Screenshot showing a menu item not highlighted while it's active

In other words, add class ‘active-trail’ to a menu item, if the item and a node have common URL paths. This is to indicate that the node is a child of the menu item.

In order to achieve that, one would use, for example, Menu position or Context module. These are a bit complex modules useful for doing more complex and rather multiple tasks. It would be an overkill here. In our case, the Menu Trail By Path (MTBP) module is just a perfect fit to accomplish this simple job. Its file size is very small compared to the other ones’ and it has versions for both Drupal 7 and Drupal 8. There is a great thing about this module – it works almost out of the box. That means there is no need for configuration – just install, enable and voila, you’re done! By almost out of the box, I mean it works beautifully with properly configured Pathauto module. It is worthwhile to mention that the MTBP also enables breadcrumb handling.

So, let’s assume the Pathauto module is already in place. If not, install, enable and configure Pathauto module first, then do the same with the MTBP module (except for the configuration of course). That’s it!

There is a great video tutorial on YouTube, by Scott Tolinski from Level Up Tutorials, on how to configure the Pathauto module.

So, if you still rack your brain ‘Why the heck the menu item doesn’t get highlighted, the paths are the same indeed’, there is no need for deep research. You will only need these two modules:

  • Pathauto with its dependencies – Token and CTools.
  • Menu Trail By Path without contributed dependencies or configuration.

Thank you for reading and if you find this article helpful, feel free to share it.

Pin It on Pinterest