I'm trying to get a menu with my custom classes.

I would like to be able to

<ul class="my-menu">// class of the whole ul
<li class="with-sub">// add class "with-sub" if has children
<a href="#">submenu</a>
<ul class="sub-menu"> // add class sub-menu to sub menu ul
<li class="title-of-the-parent">// add the title of the parent as first item of the list
<a href="#">TITLE OF THE PARENT</a>
<li class="my-submenu-item">// add a class to all sub-menu items
<a href="#"> Submenu item</a>

For the first level it's fine. I can use menu_tree and menu_link to get what I want.

I would like to know how to use $sub_menu = drupal_render($element['#below']) and customize the sub menu list.

I don't want to use any module, I want to do all through the template.php.

Thanks in advance


Take a look at theme_menu_tree() and theme_menu_link(). It should be all you need.

Sorry for the lack of examples, but theme_menu_tree is rather self-explanatory, and the page for theme_menu_link provides several examples.

| improve this answer | |
  • Thanks enzipher, I will take a look. The problem is that I don't find the key for the submenu... for the first level everything it's fine. – Tyler Durden Nov 19 '12 at 19:54
  • 1
    It's a recursive function, so it's valid for the submenu items as well. No need to do anything with the submenu rendering itself, although if you need to insert an element you might need to look into that, and in that case you should look into $element['#below'] which contains the submenu. – enzipher Nov 19 '12 at 20:09
  • I need to have a class for the menu (ul and li) and a class for the submenu (ul and li). – Tyler Durden Nov 20 '12 at 9:26

I've solved in this way:

Drupal adds a class menu to the main menu use the preg_match to find it.

function my_theme_menu_tree__menu_block_3($variables) {
  if (preg_match("/\bmenu\b/i", $variables['tree'])){ // if class is menu
    return '<ul class="main-menu">' . $variables['tree'] . '</ul>';
  else {
    return '<ul class="submenu">' . $variables['tree'] . '</ul>';

function _menu_link__menu_block__3(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';
  $parentclass = '';
  $liclass = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
    $parentclass = "sub";
  if ($variables['element']['#original_link']['depth'] == 1) {
    $liclass = "top";

  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  $list_menu = '<li class="' . $liclass . ' ' . $parentclass .  '">' . $output . $sub_menu . "</li>\n";
  return $list_menu;

Other implementations are welcome.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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