Adding links to the Top menu in Magento

Related Inchoo Services

One of the things that may sound easy to set are the top menu items, or the main menu items if you prefer. But we’re talking about Magento here and it isn’t as easy as it sounds. A specific way of creating menu items out of categories makes this fairly easy task a nightmare. Fortunately for us, Magento has a secret up its sleeve.

Magento’s logic allows only categories to appear in the top navigation. When creating a new category a simple Include in Navigation Menu setting will add the category in the navigation. Magento already explained how to add a custom link by creating a fake category and redirecting it to a specific page, but they also gave us an event to hook on to do more versatile things with the top menu.

Config

First things first. A hook has to be defined by adding the code below to the config.xml. By this we’re simply adding an event that will be fired by a dispatch event where a hook, model and method names are required.

<config>
    <frontend>
        <events>
            <page_block_html_topmenu_gethtml_before>
                <observers>
                    <my_module>
                        <class>my_module/observer</class>
                        <method>addToTopmenu</method>
                    </my_module>
                </observers>
            </page_block_html_topmenu_gethtml_before>
        </events>
   </frontend>
</config>

Observer

Now, inside the observer file defined in the config.xml a method named addToTopmenu has to be placed. The code below is just an example that adds a top menu item named “Categories” together with its children menu items, category names. That’s right, with this we’re able to create nested menu items!

public function addToTopmenu(Varien_Event_Observer $observer)
{
    $menu = $observer->getMenu();
    $tree = $menu->getTree();
 
    $node = new Varien_Data_Tree_Node(array(
            'name'   => 'Categories',
            'id'     => 'categories',
            'url'    => Mage::getUrl(), // point somewhere
    ), 'id', $tree, $menu);
 
    $menu->addChild($node);
 
    // Children menu items
    $collection = Mage::getResourceModel('catalog/category_collection')
            ->setStore(Mage::app()->getStore())
            ->addIsActiveFilter()
            ->addNameToResult()
            ->setPageSize(3);
 
    foreach ($collection as $category) {
        $tree = $node->getTree();
        $data = array(
            'name'   => $category->getName(),
            'id'     => 'category-node-'.$category->getId(),
            'url'    => $category->getUrl(),
        );
 
        $subNode = new Varien_Data_Tree_Node($data, 'id', $tree, $node);
        $node->addChild($subNode);
    }
}

The result is visible in the image below:

Categories in the Top menu

Conclusion

This way of adding new top menu links is easy to implement into Magento and gives us a greater flexibility as opposed to other methods. No fake categories are made and no templates are edited. This method requires some code, but with this programmatic way we’re able to create more than just static menu links. We’re able to create nested menu items, use collections to generate menu items, etc.

If all of this still seems like something you would rather have a professional do, we can help you with Magento development. Feel free to drop us a line!

You made it all the way down here so you must have enjoyed this post! You may also like:

Newsletter auto-subscribe on create account and place order in Magento Marko Martinovic
Marko Martinovic, | 14

Newsletter auto-subscribe on create account and place order in Magento

Magento Event Driven Programming Tips & Tricks Branko Ajzele
Branko Ajzele, | 3

Magento Event Driven Programming Tips & Tricks

Custom Magento Events: Customer First Order Branko Ajzele
Branko Ajzele, | 7

Custom Magento Events: Customer First Order

12 comments

  1. Hello Damir,

    I tried your solution by adding a new module myself, but something goes wrong somewhere.

    Can you give some more details regarding in which config.xml you have to change this and in which observer.php ?

    Thank you !

  2. Hi, I’m new in magento. I have noticed that there are several config.xml files in Magento. Which one of them should I modify in order to get this work?
    Thanks for your help!

  3. 1. create a fake category.
    2. get the category id
    3. search for category/id in id_path column into core_url_rewrite table on db.
    4. change requested path and target path. DONE

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.