Moving Category List from Top to Left in Magento

Default Magento layout locates the top navigation at the top of the store, right underneath the main header, as a horizontal bar. But what if you want it to be located at the left hand side of your store?

So first thing to do is to try and figure out what part of the system layout handles this block. In order to find out, we should first turn on the template path hints. This is done in the back office: System => configuration => developer. Set your Current Configuration Scope to point at your current web site, and then go to the debug tab, and turn on the Template Path Hints option.

Now at reloading our front end, we can see the template paths for each block. Focusing on the top navigation menu, we can see that it is controlled within the template/catalog/navigation/top.phtml. That also means that its layout file’s name is catalog.xml, as the layout file name has always the same name as the first descendant of the template’s directory in this path.

So our next action is to copy this file from the default template, to our own, keeping off-course the same folder structure.

Having done that, open the file, and look for the block named catalog/top.nav. It is located within a reference tag with the name ‘top.menu’:

<reference name="top.menu">
  <block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/>
</reference>

change the reference name from “top.menu” to “left” and reload the page.

You should now see that the top navigation block has roamed from right underneath the page header, to the left hand side of your page.