Custom category menu navigation in Magento

Here I wanted to show you how to build a custom Magento category listing block that you can use on your own Magento store. Magento has its top menu reserved for category navigation. It’s pretty solid for displaying categories, even when there is a large number of them.

In this article I’ll cover the creation of a full vertical menu. I’ll go 3 levels deep: category, subcategory, and sub-subcategory. You can always expand on this, but I believe 3 levels are more than enough for most stores.

The code could be altered to display categories, categories and the current category’s subcategory or categories and all sub-categories.

The layout
Open app/design/frontend/base/default/layout/page.xml or your theme’s equivalent.
Place the following code under default tag:

<reference name="right">
     <block type="core/template" name="catalog.sidenav" template="page/custom.phtml" before="cart_sidebar"/>
</reference>

This will tell Magento to load our template on each page that sports a layout with a right column.
Now, let’s create our template file.

The template
What we need to do is go through all of the store’s categories, get their subcategories (2nd level), sub-subcategories (3rd level) and display them. In the process we need to look for a case when the ID of the category in our list matches the ID of a current category. When we find it – we’ll make it bold.

Create app/design/frontend/base/default/template/page/custom.phtml with the following content:

<ul>
    <?php
        $obj = new Mage_Catalog_Block_Navigation();
        $storeCategories = $obj->getStoreCategories();
        Mage::registry('current_category') ? $currentCategoryId = Mage::registry('current_category')->getId() : $currentCategoryId='';
        foreach ($storeCategories as $_category):
    ?>
            <li>
                <strong><?php echo $_category->getName(); ?></strong>
                <?php $categoryChildren = $_category->getChildren(); ?>
                <?php if($categoryChildren->count()) : ?>
                    <ul>
 
                        <?php foreach($categoryChildren as $_categoryChild) : ?>
                            <?php $_categoryChildModel = Mage::getModel('catalog/category')->load($_categoryChild->getId());?>
                            <?php $categoryGrandchildren=$_categoryChild->getChildren(); ?>
                            <li>
                                <?php
                                    $currentCategoryId===$_categoryChild->getId() ? $bold="style=\"font-weight:bold\"" : $bold='';
                                    echo '&emsp;' . '<a href="' . $_categoryChildModel->getUrl() . '"' . $bold . '>' .  $_categoryChild->getName() . '(' . $_categoryChildModel->getProductCollection()->count() . ')</a>';
                                ?>
                            </li>
                            <?php if($categoryGrandchildren->count()) : ?>
                                <?php foreach($categoryGrandchildren as $_categoryGrandchild) : ?>
                                    <?php $_categoryGrandchildModel = Mage::getModel('catalog/category')->load($_categoryGrandchild->getId());?>
                                    <li>
                                        <?php
                                            $currentCategoryId===$_categoryChild->getId() ? $bold="style=\"font-weight:bold\"" : $bold='';
                                            echo '&emsp;&emsp;' . '<a href="' . $_categoryGrandchildModel->getUrl() . '"' . $bold . '>' .  $_categoryGrandchild->getName() . '(' . $_categoryGrandchildModel->getProductCount() . ')</a>';
                                        ?>
                                    </li>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>
            </li>
        <?php endforeach ?>
</ul>

You can also insert this template to any other page by coding a layout update or via admin, by inserting this line as content of your CMS page:

{{block type="core/template" template="page/custom.phtml"}}