Knowledgebase
How to add a custom link to the top navigation in Magento
By default, Magento's top navigation contains links to your product categories. But what if you want to add a custom link there? In this article we will show you how to add a custom link to the top navigation in Magento.
The file that contains the code for the top navigation is called top.phtml and its location may vary depending on your template. For the default Magento template the full path to the file is:
app/design/frontend/base/default/template/catalog/navigation/top.phtml
You can edit the file by downloading it with your favorite FTP client, opening it with a text editor (e.g. Notepad), making the changes and then uploading it back to your Magento directory.
Another way to edit the file would be to connect to your account via SSH and open it with vim or nano. HostKnox customers have free SSH access to their accounts and can edit the file directly on the server.
A third way of editing the file would be to use some of the tools your control panel provides. HostKnox customers can edit the file using the File Manager in their Pixie control panel.
Once you open the file, scroll down to its bottom and find this section:
<div class="nav-container">
<ul id="nav">
<?php echo $_menu ?>
</ul>
</div>
To add a link that will appear in the top navigation, you need to add the following line inside the <ul> tags:
<li><a href="http://somedomain.com"><span>Your Link</span></a></li>
Let's say that you want to create a link called Web Hosting that will open the site http://www.hostknox.com. The above section in the top.phtml file should look like this:
Â
<div class="nav-container">
<ul id="nav">
<?php echo $_menu ?>
<li><a href="http://www.hostknox.com"><span>Web Hosting</span></a></li>
</ul>
</div>
Â
Flush the Magento cache and reload your front page to see the new link in your Magento top navigation.