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

Highlighting current category
Sr. Member
Total Posts:  76
Joined:  2007-11-23
A^2, MI

Hi all,

We wanted to change Magento to highlight in the top nav menu, the first level category that the user had selected when browsing the catalog.  Since it does not look like Magento currently does this, I took on the task of finding the right place to modify the code. 

Since multiple class IDs are used to produce the menus. I spit out an additional ID to indicate the current first level category.  Then I used CSS in the skin file (menu.css) to highlight things as needed.

This worked like a champ, best thing is, because it’s CSS based, it won’t cause a problem with other skins that don’t define the class.

Warning, this does require a core change, so make sure to back up your files first.  Also, I am working with magento 0.6.1410, so the change might be a little different in other versions.

First I changed the drawItem function in the core file /app/code/core/Mage/Catalog/Block/Navigation.php to add the class ID to the HTML output.  I added the following lines (just what’s between the start change/end change markers, the other code is there for context).  I have tested this change on both a WAMP and Linux install.

.= ' parent';

// ----------- start change ------------------- 
       //gcc changed to make the curr cat highlight in the menu bar

// get the bread crumb path
// get the first listed category in the breadcrumb
$curr_cat '';
           foreach (
$_cur_path as $name=>$breadcrumb{
//if the current category has the same name, then put put the additional class id
if ($curr_cat == $category->getName()) {
.=' cat_selected';
//------------- end change ----------------

$html.= '">'."\n";

This calls the functions in the breadcrumb object to get the category hierarchy and then gets the first category in the array.

If the current category being processed has the same name, then the class name “cat_selected” is added. 

Now just add the class to the menu.css file in the theme’s skin area like this:

#nav li.cat_selected a {color:white; background-color: orange;}

and the menu bar shows the category as highlighted!

Of course, if you use the same category name in multiple places, you will tag other parts of the menu structure as well.

I’m still coming up to speed on the architecture of Magento so I thought I’d like to share my change with the community and get comments and maybe suggestions of a better way to do it.

Anybody think of another way to tackle this? Using Breadcrumb seems a bit lame, but, I’m not ready to dig too much deeper until the docs are done.

Greg Croasdill
Croasdill and Associates

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