Adding a class to the <li> tag of a menu

Question

I need to put a class/ID on the actual li element as each link in the menu has a color-coded background when active meaning, I can't just style ".active-trail" as that will be the same color for every link.

Creating a menu and using the CSS ID or class puts the ID/class on the a element, not on the <li> tag.

I could write something in jQuery, but I thought there might be a way in Drupal.

The output I want would be like the following.

<li class="leaf myCustomClass active-trail"><a href="/trash-this" class="active" title="">Test links</a></li>
<li class="leaf myCustomClass"><a href="http://#" class="specialMenuItem first" title="">first</a></li>
<li class="leaf myCustomClass"><a href="http://#" class="specialMenuItem" title="">second</a></li>

Answer 1

You can use menu attribute module which provide functionality to set id or class for the menu item.

This simple module allows you to specify some additional attributes for menu items such as id, name, class, style, and rel.

Answer 2

You need to use theme_menu_item_link()

The following is an example that I pulled from an old site:

function THEME_menu_item_link($link)
{
    if (empty($link['localized_options']))
    {
        $link['localized_options'] = array();
    }

    //Give this menu item a unique id
    $link['localized_options']['attributes']['id'] = 'menu-item-' . $link['mlid'];

    //Not sure if this is the cleanest method, but it should allow us to follow
    //the active-trail across menu items, based on path.

    //Get the start of the current path (e.g. admin/build/modules would be admin)
    $base_path = preg_replace('/^([A-Za-z0-9_-]+)\/(.*)/', '${1}', drupal_get_path_alias($_GET['q']));

    //Get the current link we're looking at
    $this_link = drupal_get_path_alias($link['href']);

    //If the
   if($base_path == $this_link)
   {
       $link['localized_options']['attributes']['id'] = 'menu-active-trail-' . $link['mlid'];
   }

   return l($link['title'], $link['href'], $link['localized_options']);
}

Answer 3

You can add the below code to your template.php. Reference article: http://scriptcult.com/subcategory_197/article_978-add-class-to-menu-item.htm

/**
 * Theme a menu link.
 */
function THEMENAME_menu_link(array $variables) {
  // Add class for li.
  $variables['element']['#attributes']['class'][] = 'menu-' . $variables['element']['#original_link']['mlid'];
  // Add class for a.
  $variables['element']['#localized_options']['attributes']['class'][] = 'menu-' . $variables['element']['#original_link']['mlid'];
  return theme_menu_link($variables);
}

Answer 4

For Drupal 8 you can use the menu_link_attributes module.