How to add custom classes to navigation

Problem: I would like to add a custom class name to certain <li> within my primary site navigation.

Example: change <li>About</li> to <li class="about">About</li>

I have been using the following global to display my nav within 'elements/header.php' in the Plain Yogurt theme:
$a = new GlobalArea('Header Nav');

Any advice or links to a similar thread that I couldn't find would be great. Thanks in advance.

View Replies: View Best Answer
MysteriousCleon replied on at Permalink Reply
You want to add different class to each menu element, or just add one class to those elements?
robinpigowner replied on at Permalink Reply
Either or would be fine for me. Even if it took the page title and created a class from it would be good.
jordanlev replied on at Permalink Best Answer Reply
I have a template for the auto-nav block that includes this feature (kind of -- it uses the page id number instead of name, because you could have two pages with the same name):
robinpigowner replied on at Permalink Reply
Jordan, I will give this a whirl. Thanks for the post. It seems to me like this functionality should be in the core as it is quite a common need (at the very least an option)
jordanlev replied on at Permalink Reply
I do hope to replace the core template with this when I have the time, but more for the ease of customization (the code is a lot cleaner than the mess of spaghetti in the core template).

Putting different classes on different menu items is actually not a common thing to do -- the point of a CMS and an auto-generated menu is to have a system where users can add new pages and rearrange the order whenever they want, without having to call up a designer or developer to make changes. As such, the primary navigation menu should really be designed with flexibility in mind, and not have "hard-coded" styles.