Why do Custom Nav Menus generate so many classes on list items? Can I manage this somehow?

Question

Below is an example. 3 classes attached to each item, except current item, which has 6. Can I pare this down somehow?

<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
   <ul class="sub-menu">
   <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
   <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
   </ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>

Answer 1

I'm going against the majority on this one :)

Yes, it can be a good idea to strip it down. Personally I'm keeping only the current-xxx type classes and replacing them with active, and active-parent (for active parent or ancestor items).

Why?

• around the web, active has became the standard class name for active menu items.
• you get a little less HTML, and less CSS rules; the KB that you save might not be much, but it certainly makes the code more readable.

I'm also adding a extends class on list items that have children, this allows me to generate arrows with CSS, or avoid the visual flicker when using javascript like superfish which adds arrow classes.

---

My code:

// for custom menus 
add_filter('nav_menu_css_class', 'my_menu_css_classes', 10, 2);

// for the page menu fallback
add_filter('page_css_class', 'my_page_css_classes', 10, 2);

function my_menu_css_classes($old_classes, $item){

  $classes = array();

  $allowed_classes = array('current-menu-item', 'current-menu-parent', 'current-menu-ancestor', 'extends');
  $new_classes = array('active', 'active-parent', 'active-parent', 'extends');

  foreach($old_classes as $class)
    if(in_array($class, $allowed_classes))
      $classes[] = str_replace($allowed_classes, $new_classes, $class);

  return $classes;
}

function my_page_css_classes($old_classes, $page){
  $classes = array();

  // adjust active menu classes to match the ones added by wp_nav_menu()
  foreach($old_classes as $class)
    if($class === 'current_page_item')
      $classes[] = 'active';
    elseif($class === 'current_page_parent' || $class === 'current_page_ancestor') // no need for a "ancestor" class, useless
      $classes[] = 'active-parent';

  return $classes;
}

Answer 2

All those classes are for hooking into javascript for something like superfish, not because of IE6. That's crazy talk.

Also, without a class such as current_page_item, you wouldn't be able to highlight the current page within the navigation.

Flexibility is the key. Add all the classes, unique ones for unique items in the list, give the end designer a lot of flexibility in styling. But I do agree, that is a buttload of classes. A decent HTML programmer, designer could do the equivalent with much less code.

Answer 3

The wp_nav_menu function gives you the ability to modify the ID and Class for both the container and the menu. But not the LI elements.

If you take a look at the source where it is building the LI elements ( start_el() function); You can see it is using the filter nav_menu_css_class; The filter will take the array you give it (of strings) and use it to build out the class tags.

Note: From what I see in the code, if you pass it an empty array. Wordpress will still include the class attribute for the LI element, it will just be empty.

Answer 4

@Ray Gulick: I hate to dive in but I concur with @Dan Gale, @EAMann and @Insanity5902. The "bloat" doesn't cause any tanbgible problems and enables a designer to theme the menu in a lot of flexible ways.

I'm curious why the "bloat" bothers you? I know it's not pretty but next to nobody will ever see it. If its a performance concern that are hundreds of other things to address first such as reducing HTTP requests and shaving the sizes of your images the latter of which will probably have an order of magnitude more benefit.

Answer 5

I wouldn't recommend paring it down. Yes, the markup might look bloated, but this is the only way you can really narrow down the styling if you want your site to look good in, say, IE6. Keep in mind that IE6 doesn't natively support multiple selectors (i.e. li.menu-item.current will break and default to li.current), so if you're doing any fancy CSS and want it to work with IE6, it's better to have a lot of class selectors available than not enough.

So, in reality, you could pare the list down to class="menu-item" ... but if you're going to ever have a menu with more than one post type, you'll need menu-item-type-post_type ... and if you want to do fancier filtering, you'll benefit from the menu-item-## class as well.

Remember, no one will likely ever see the actual code behind your site, and having multiple classes defined won't hurt anything.