Adding Top Links Menu for Magento

Having troubles adding links to the top menu across site wide and have active functionality in it? That was very simple task in Magento that need one (1) file to be edited. Default Magento Wiki describes this topic but only limited in About Us page which is running to be default. When making a CMS pages such as home, contact us, FAQ, etc… You need manually edit the top.phtml file of you magento theme in order to add those pages in your front end structure.

The first thing that you need to do is to locate the file where top menu is coded. Top menu is under top.phtml file which placed in this directory app/design/frontend/base/default/template/catalog/navigation/top.phtml. Next is to add the following code to nake those links visible in the front end.

Alternative Method in adding top links

<- The default code for top.phtml

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>

This code will generate a navigation menu based on product category. To add other CMS pages (which created in magento Backend), replaced the above code by this.

<?php 
 $_currentUrl = Mage::helper('core/url')->getCurrentUrl();
 $_homeUrl = Mage::helper('core/url')->getHomeUrl();
?>

 <div class="nav-container">
<ul id="nav">
<?php echo $_menu; ?>  
     <li class="level0 nav-1 level-top <?php if ($_currentUrl === $_homeUrl.'contact'):?> active<?php endif;?>"><a href="<?php echo $this->getUrl('contact')?>"><?php echo  $this->__('Contact Us') ?></a> </li>
</ul> </div>


 <?php endif ?>

Yellow code : passing the helper class (getting home and current url ) in to variables. Green: represents the adding of list and anchor elements to the navigation. In a given example, contact us page is added in the top menu section. Contact Us page  must be created in Magento backend.

<?php if ($_currentUrl === $_homeUrl.'contact'):?>   

This code set active class if condition is met.

 <?php echo $this->getUrl('contact')?> 

Get the url of contact page or any cms page that you want to add.Please REMEMBER that the word inside quotation is the page identifier which you set up in creating that page. To add more menu, just create a cms page at the backend then copy the green code then replace the exact page identifier then you're superb.

Adding Top Links using XML

Adding top links in XML is quite simple just replace the top.links reference code by this one. For example we want to add My account and Contact Us page in when customer Login. Doing so, you need to edit the your customer.xml file which located in your theme/layout/customer.xml. Look for top.links reference node and Insert the following code. For other pages such as contact us please make sure that the url is equal to page url key that identified when creating cms pages. Code to be inserted:

<action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>94</position></action>

Your XML  code will look like this: 
<!--
Default layout, loads most of the pages
-->
    <default>

        <!-- Mage_Customer -->
        <reference name="top.links">
        
         <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>94</position></action>   

            <action method="addLink" translate="label title" module="customer"><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare><urlParams/><position>97</position></action>
        </reference>
    </default>