I am trying to display my top navigation like this:

 | Main Category |
    (on hover)
        |     _________________________________________________
        |     |                                               |
        |-->  |  Category 1.1   Category 1.2    Category 1.3  | 
              |  _____________  _____________   _____________ | 
              |  Subcat. 1.1.1  Subcat. 1.2.1   Subcat. 1.3.1 |
              |  Subcat. 1.1.2  Subcat. 1.2.2   Subcat. 1.3.2 |
              |  Subcat. 1.1.3  Subcat. 1.2.3   Subcat. 1.3.3 |

So my goal is to list the subcategories below the parent category, directly in the ul.level0 dropdown, instead of having them inside of another ul (ul.level1).

I know there are several extensions that would allow me to do this, but it seems they all offer too much functionality and therefore have a huge impact on store performance while I could probably achieve the same result with a simple template change adding no extra page load.

1 Answer 1


Magento and above

You can change this directly in app/design/frontend/yourtheme/default/template/page/html/topmenu/renderer.html

For your reference, this is defined in page.xml:

<block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml">
    <block type="page/html_topmenu_renderer" name="catalog.topnav.renderer" template="page/html/topmenu/renderer.phtml"/>

Then you can just these two lines:

if($childLevel <= 0)
  $html .= '<ul class="level'. $childLevel .'">';
if($childLevel <= 0)
  $html .= '</ul>';

For older versions of Magento

The HTML for the top navigation is located in: app/code/core/Mage/Page/Block/Html/Topmenu.php so you will need to rewrite this block in a custom module


Then you just need to override the _getHtml function - you will notice when it populates the children dropdown, it adds <ul> tags. You can do the following:

 if($childLevel <= 0)
     $html[] = '<ul class="level' . $childLevel. '">';
 $html[] = $this->_getHtml($child, $childrenWrapClass);
 if($childLevel <= 0)
     $html[] = '</ul>';
  • 2
    I only checked in Enterprise 1.12 and Community 1.9.1, but the top menu block in the header is actually in Mage_Page__Block_Html_Top_Menu.
    – David Tay
    Commented May 11, 2015 at 13:22
  • I think you are right, the file to change is Mage\Page\Block\Html\Topmenu.php. I will give this shot and share my results. Thanks!
    – loeffel
    Commented May 11, 2015 at 13:24
  • My bad, the Catalog_Navigation block would be for the left category navigation. I have updated my response with the correct paths ;) Commented May 11, 2015 at 13:30
  • 1
    I have just checked, since, you can directly modify the template in template/page/html/topmenu/renderer.phtml so you don't have to create a module. Although, if you run an older version, you will need this override (I will update my ticket accordingly) Commented May 11, 2015 at 14:41
  • I am trying to achieve similar layout of the top navigation -> sub navigation however not getting the right result. if($childLevel <= 0) $html .= '<ul class="level'. $childLevel .'">'; ... if($childLevel <= 0) $html .= '</ul>'; any detail explanation to get the desired layout? @Mayers
    – harry
    Commented Mar 8, 2018 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.