6

How can I add classes to the <a> or <li> tags of the main menu to signify which level they are in the menu hierarchy (e.g. "level-1", "level-2", etc.)? The code below shows the first link has 3 sublinks (dropdown):

<ul class="menu">
  <li class="first expanded">
    <a class="level-1" href="#" title="">Top link</a>
    <ul class="menu">
      <li class="first leaf"><a class="level-2" href="#">Dropdown 1</a></li>
      <li class="leaf"><a class="level-2" href="#">Dropdown 2</a></li>
      <li class="last leaf"><a class="level-2" href="#">Dropdown 3</a></li>
    </ul>
  </li>
  <li class="last leaf">
    <a class="level-1" href="#" title="">Another top link</a>
  </li>
</ul>

2 Answers 2

7

You can use theme_menu_link() in Drupal 7.

function MYTHEME_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = ''; 

  $element['#attributes']['class'][] = 'depth-' . $element['#original_link']['depth'];

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Here I added:

$element['#attributes']['class'][] = 'depth-' . $element['#original_link']['depth'];

Which will provide a class on the list item with the menu depth.

5
  • @googletorp is right that proper use of css is probably a lower overhead solution.
    – acouch
    Commented Aug 8, 2011 at 15:30
  • Amazing, that worked perfectly! So that's how the l() function works. I got more than what I was expecting from that answer and it's all thanks to you, acouch.
    – enchance
    Commented Aug 8, 2011 at 16:58
  • Question, how were you able to target only the main menu and not affect the other menus I had on the page? And if you mind, how would the code look if you placed the class in <a> instead of <li>? Been trying to do it myself but I keep failing.
    – enchance
    Commented Aug 8, 2011 at 17:17
  • This should work for all menus created by the menu system. To apply the class to the 'a' you could add "$element['#localized_options']['attributes']['class'][] = 'depth-' . $element['#original_link']['depth']; " . Please understand though, why @googletorp's answer will also work.
    – acouch
    Commented Aug 8, 2011 at 17:37
  • @acouch Good answer, this was actually less work than I thought. Still I prefer CSS for something like this.
    – googletorp
    Commented Aug 8, 2011 at 17:56
3

Modifying classes and markup in the menu structure is not very easy (at least not in Drupal 6 and I think Drupal 7 is the same). The problem is that in order to know what lever you are printing, you need to handle the creation of the menu pretty much by your self.

With the proper CSS, you don't need such indication, as you an use the nesting instead:

  • ul.menu li a Level 1
  • ul.menu ul li a Level 2
  • ul.menu ul ul li a Level 3

This is not elegant, and can make matter more complicated than needed, but it's a simpler solution than having to deal with the Drupal menu system.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.