Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email

Magento Forum

Custom IDs in Navigation List
Jr. Member
Total Posts:  10
Joined:  2008-01-14
Elgin, IL

I had been wanting to add some specific IDs to my list items in the top navigation list, so I wrote a little function to do that.  I thought I would share it with you guys, as I am sure you can clean it up a bit.  PHP has so many functions and there is probably one that does what part of mine did more effectively, so if you know it, please let me know!

This was added to the Mage_Catalog_Block_Navigation class.
You can find it in app/code/core/Mage/Catalog/Block/Navigation.php

class Mage_Catalog_Block_Navigation extends Mage_Core_Block_Template

     * Create a CSS appropriate ID from the category name
     * @return Varien_Data_Tree_Node_Collection

public function getCategoryID ($catname
= array(' ''!''@''#''$''%''^''&''*''('')''=''+'"'"'"'';'':''/''?'',''<''>''.''['']''{''}'"\\"'|''`''~');

I put it at the top of the class for the sake of those who might not know where to put it in but want to add the functionality.  It doesn’t need to go at the top, but you can put it there and it’ll work fine.

What that does is make a string “friendly” to CSS by removing illegal characters and replacing them with a ‘-’ instead.  I also made them lower-case, it doesn’t need to be.  When you test it out, if you have something like “Cats & Hats” the string returned will look like “cats---hats”, so keep that in mind for later.

Now to add this to the top navigation of your site, go down to the drawItem function and add this in.

public function drawItem($category$level=0$last=false)
        if (!
$category->getIsActive()) {

return $html;

$hasChildren $children && $children->count();
$html.= '<li id="cat-' $this->getCategoryID($category->getName()) . '" ';

I added

id="cat-' . $this->getCategoryID($category->getName()) . '" ';
to the code.

I prefaced the id with “cat-”, but that was just for naming convention, you can remove that if you want.  It’s your site, customize it how you wish.

If you are unsure why you would want to use IDs for your list items in your top navigation, just remember that you can use them as hooks.  So if you want to use an image that is specific to each category, or you want to add other specific things to certain levels, say a unique picture next to the different categories or items, here you go.

This might be nicely integrated with a “preview” of a section.  Anyway, let me know if it works for you.

- Titus

Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top