This is not a comprehensive example (I didn’t write out an example of editing the navigation myself … yet) – but I will point out where the files are that you need to edit the top and left navigation.

This is a tad complicated because of the use of javascript in the navigation, but it’s not too bad. It ends up being a bunch of functions which just spits out the proper HTML and javascript to get things going (and some code to retrieve the categories).

First off, the template files.
The files that have the HTML are located here:

1. app/design/frontend/*/*/template/catalog/navigation/left.phtml
2. app/design/frontend/*/*/template/catalog/navigation/top.phtml

Top.phtml controls (you guessed it) the navigation in the header area (including the drop down portions, which are controlled via javascript)
Left.phtml controls the left hand navigation, if you set your categories to be an anchor to get the left hand navigation to be used.

Now the file that pulls the categories (and has some functionality to create some of the HTML) is here:
app/code/core/Mage/Catalog/Block/Navigation.php

You should review this to see the various functions and see what they do.
The functions “drawItem” and “drawOpenCategoryItem” should be of particular interest, since they create some HTML to output.

Hope this helps someone get started creating a custom navigation!

By Fido from exploremagento.com

Related posts:

1. Editing the Footer in a stock magento build
2. Magento Navigation, how to customize very helpful information?
3. Adding Links to Magento Menu Bar
4. Tips For Creating Dynamic Category Landing Pages
5. Custom Category Images Listing Block Tutorial