I have a menu similar to Prada's where by users click for the menu and it drops down:


I am looking to make information for certain categories appear in the header drop-down too. I.e. they click on 'collection' and a short paragraph fits into the menu to the right (almost like a sub-category).


I also added this to 'renderer.phtml':

 $html .= '<ul class="level' . $childLevel . '">';
 $html .= $this->_getHtml($child, $childrenWrapClass);
 $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId($child->getId())->to     Html());
$html .= '<span class="nav-static-block" style="background:#fff; border-top:1px solid #ccc; padding:10px;">';
$html .= $staticBlock;
$html .= '</span>';
$html .= '</ul>';

So it now looks like this:

 $html = '';

 $children = $menuTree->getChildren();
 $parentLevel = $menuTree->getLevel();
 $childLevel = is_null($parentLevel) ? 0 : $parentLevel + 1;

 $counter = 1;
 $childrenCount = $children->count();

 $parentPositionClass = $menuTree->getPositionClass();
 $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';

foreach ($children as $child) {
$child->setIsFirst($counter == 1);
$child->setIsLast($counter == $childrenCount);
$child->setPositionClass($itemPositionClassPrefix . $counter);

$outermostClassCode = 'level'. $childLevel;
$_hasChildren = ($child->hasChildren()) ? 'has-children' : '';

$html .= '<li '. $this->_getRenderedMenuItemAttributes($child) .'>';

$html .= '<a href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName())) .'</a>';

if (!empty($childrenWrapClass)) {
    $html .= '<div class="'. $childrenWrapClass .'">';
 $html .= '<ul class="level' . $childLevel . '">';
 $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId($child->getId())->toHtml());
$html .= '<span class="nav-static-block" style="background:#000; border-top:1px solid #ccc; padding:10px;">';
$html .= $staticBlock;
$html .= '</span>';
$html .= '</ul>';

$nextChildLevel = $childLevel + 1;

if (!empty($_hasChildren)) {
    $html .= '<ul class="level'. $childLevel .'">';

    $html .=     $this->render($child, $childrenWrapClass);
    $html .= '</ul>';

if (!empty($childrenWrapClass)) {
    $html .= '</div>';

$html .= '</li>';


return $html;

It works perfectly and is calling everything perfectly!

1 Answer 1


You can roll your own or you can use Pronav that can do that and more. Visit the demo store to see it's possibilities.

We have very good experiences with several customers using this extension.

The "roll your own" version, aka magento topmenu-101:

  1. The default top menu is only capable of generating a menu tree using the store categories
  2. There's a large difference between the rwd top-menu and the other default design packages and that is that the rwd version only renders top-level categories.
  3. Many have gone before you, borrow code, but don't borrow code that calls Mage::getModel('catalog/category)->load($id) for each menu item ( why not? - how to fix - slide 10 )
  4. The top menu is inserted using a text_list (see page.xml in either base/default/layout or rwd/default/layout). This means the easiest way to add something to the menu is to add another block to that text list, provided that this works with the generated HTML.
  5. Since 1.8.2 the topmenu now has support for a "renderer". This is code that used to be in the TopMenu block that recursively loads the menu tree and is now moved to the template. No more rewrites for simple adjustments, allthough the default file isn't your typical Magento template and frankly a quick hack.
  6. Given 5, you can use your own renderer by extending Mage_Page_Block_Html_Topmenu_Renderer if needed and override the block type in a layout XML file.
  7. Some people create empty categories in the catalog with URL keys that point to CMS pages or the home page, just so to make it appear in the top menu. This loads a bunch of overhead associated with categories that can be avoided using methods described in 4 to 6 and may need additional URL rewrites or layout updates to get working properly (/contact.html != /contact).
  8. Typically, JavaScript provided interactivity is out of scope for MageStack, unless made very specific and being lucky somebody has that lying around or when it deals with bugs / configuration issues in the default installation.
  9. Looking in skin/rwd/default/css/styles.css shows various class-based selectors with the keyword 'hide' and 'hidden' that aid in hiding an item by default.
  10. See 8 on how to unhide something on the click event. Also see js/lib/dropdown.js for inspiration.

Hopefully this helps you get started and feel free to ask specific questions if you get stuck.

  • Really looking to "roll my own" being that I have everything else built and am not looking to buy an extension. Thank you though. Commented Apr 28, 2015 at 18:08
  • Thank you for the helpful information. I did think about #7 - creating the empty category and using that to show in the top menu. The 'topmenu.php' file I got was in the core files (created a new folder titled 'local' and placed it in that path. There's several tutorials for this but I just can't seem to get it working. Others have though. Can you see anything wrong with my code that might explain why it isn't working? I'm wondering if i'm not calling the block 'category-node-17' properly from that code? Commented Apr 28, 2015 at 19:57
  • I also checked my CSS and nothing seems to be hidden. Commented Apr 28, 2015 at 20:01
  • I'm guessing you added that to code _getHtml(). If you look at getHtml() (without the leading underscore) you see that this code is only called when no renderer is defined. This is what point 5 and 6 are refering to. The bit in your page.xml to look for is <block type="page/html_topmenu_renderer" name="catalog.topnav.renderer" template="page/html/topmenu/renderer.phtml"/>.
    – user4351
    Commented Apr 28, 2015 at 20:08
  • Thank you. I found the bit in my .xml file for the renderer, and I found the 'renderer.php' under the mage path. I'm not sure how I do this though; are you suggesting I remove that line in my '.xml' file for the renderer to stop the 2 linking? Sorry, little confused over there! Really appreciate all your help! Commented Apr 28, 2015 at 22:18

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.