Change Drupal 7 Menu List Class & Attributes — The Drupal Way!

Have a few menus on your site & looking for a quick way to add or change the menu classes and attributes? Use the theme_menu_tree__[menu_name] override.
Published
Updated
Typical Read
1 minutes
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Find your next web developer job
jobs by Indeed

Change Drupal 7 Menu List Class & Attributes — The Drupal Way! was originally published on May 29, 2019 and has recently been updated on Aug 6, 2020 to reflect emerging trends.

Have a few menus on your site & looking for a quick way to add or change the menu classes and attributes? Use the theme_menu_tree__[menu_name] override in your theme’s template.php file to change Drupal 7 menu list class and attributes:

// template.php

/**
 * Override theme_menu_tree().
 */
function theme_menu_tree($variables) {
  return '<ul class="menu">' . $variables['tree'] . '</ul>';
}

/**
 * Override theme_menu_tree__[menu_name]().
 */
function theme_menu_tree__main_menu($variables) {
  return '<ul class="menu">' . $variables['tree'] . '</ul>';
}

The code above will allow you to easily change all menu ul classes and other attributes or just the main menu’s ul classes and attributes.

Change Drupal 7 Menu List Class

Looking for a module to change Drupal 7 menu list class & attributes?

Unfortunately, I haven’t been able to find one that handles the individual menu ul instances cleanly, but the Menu Attributes module is a start. It gives users the ability to set the following attributes for each menu item — this does not help with setting the ul classes & attributes:

  • id
  • name
  • target
  • rel
  • class
  • style
  • accesskey

What about Drupal 8? Check this out article out by Tamas Hajas: Drupal 8 Twig: add custom CSS classes to menus (based on menu name).


Related Articles

Did you find Change Drupal 7 Menu List Class & Attributes — The Drupal Way! useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Latest Job Postings
Posted on Aug 9, 2020 at 9:17pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 9:15pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 1:19am
Littleton, CO
jobs by Indeed
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Sponsored
Help support open-source projects & pro-bono non-profit services by donating today.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Sponsored
Help support open-source projects & pro-bono non-profit services by donating today.

1 Comment on “Change Drupal 7 Menu List Class & Attributes — The Drupal Way!”

# May 30, 2019

Thanks for the code template. Easy and helpful!

Leave a Reply

Your email address will not be published. Required fields are marked *

All comments posted on 'Change Drupal 7 Menu List Class & Attributes — The Drupal Way!' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.