Add Home Link To Magento Navigation With Active State

back to tech articles
Magento 1.8.0.0 CE

This is actually really easy to do. Why this still isn’t part of Magento out-of-the-box beggars belief, but I guess they have their reasons.

First, copy the menu phtml file to your own theme folder. The original is located at app/design/frontend/base/default/template/page/html/topmenu.phtml.

Now let’s add our link, with ‘active’ state support. By default, the file looks like this (less comments):

1
2
3
4
5
6
7
8
<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>

We’ll be using that and just adding our own link in front of the dynamic menu. Obviously you could be editing the class that builds the menu, but I find this method much quicker and cleaner. Change the file to the following:

1
2
3
4
5
6
7
8
9
10
11
<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
        <li class="home<?php if ( Mage::getBlockSingleton('page/html_header')->getIsHomePage() ) { echo ' active'; } ?>">
            <a href="<?php echo $this->getUrl('')?>" class="level-top"><span><?php echo $this->__('Home') ?></span></a>
        </li>
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>

Voila! The link will be ‘active’ if we’re on the home page, otherwise it will behave as all the others.

Hope this quick article helps someone out.