I know that this isn't a really big priority but with the default Drupal menu you get css classes like .first or .last or .active.

.first and .last are being provided by CSS3 and .active only needs to be on the <a> link not on the <li> due to the way my CSS works.

All these classes are unneeded and I'd like to remove them, so I can create a clean and efficient template.

Does anyone have any ideas how to do this (and if possible provide a small code sample)?

Thanks :)


Basically you're going to have to alter you're theme to provide an alternate function to provide an entry point into menu_tree_output. This means finding the block or function that renders the menu, overriding that function, and each that it calls until you get to menu_tree_output.

After that copy a changed version of menu_tree_output into your theme's template.php and modify it as necessary. You may even have to override theme_menu_link to prevent options from showing up on both the li and a elements.

For the most part though, I think you answered your own question at:

only needs to be on the 'a' link not on the 'li' due to the way my CSS works.

Obviously, a CMS cannot readily accomodate the needs of all possible combinations of CSS. I often have to add classes due to the complex needs of the navigation for crazy designs. I would count myself lucky if I didn't have to add classes, and just had extra classes available in the markup.


I will get so downvoted for this but are you sure this is the last thing you need to make your site awesome? You are wasting your time on microoptimization.

  • Yeah, :) Its just a requirement to be clean, and modern and standards compliance. – tang0th Sep 4 '11 at 22:24
  • And having extra classes contradict neither... you have your clean definition wrong IMO. – user49 Sep 4 '11 at 22:30
  • 1
    microoptimization can be fun to + it can be hard actually to work with to many classes & wrappers - one thing that drupal is really good at i might add ;) – mortendk Oct 3 '11 at 23:21

if you wanna kill off all the classes that comes out with the menu list look after the theme_menu_link() thats where the

<li class="first leaf menu-mlid-305">

comes from

if you really wanna kill all the classes you can do something like this :

function THEME_menu_link(array $variables) {
  //unset all the classes

  $element = $variables['element'];


  $sub_menu = '';

  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";

dump that dunction into you template.php and you the classes that the menus comes with will go kaboom - you will also remove the active classes etc, but hey the li tags are goddamn clean


It really depends on how you render the menu.

If the menu is rendered via menu_tree(), you can strip all classes from menu tree like that:

Solution 1 template_preprocess_menu_link():

function MYMODULE_OR_THEME_preprocess_menu_link(array &$variables) {
  // Unset all the classes.

Solution 2 theme_menu_tree():

function MYTHEME_menu_tree($variables) {
  // Strip all classes from menu tree.
  $variables['tree'] = preg_replace('/class="[^"]*"/i', '', $variables['tree']);
  return '<ul class="menu">' . $variables['tree'] . '</ul>';

You can do the same with MYTHEME_preprocess_menu_tree().

Solution 3 theme_menu_link() as @mortendk suggested.

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.