Magento Navigation - How to edit the Magento navigation

Editing the Magento Navigation

Posted on 04. Sep, 2008 by Fido in Design, Magento

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:

app/design/frontend/*/*/template/catalog/navigation/left.phtml
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!

Tags: Design, magento customization, navigation, php, sidebar

11 Comments

Matt

05. Sep, 2008

I recently made a new navigation bar for a magento example store:
you can see it here:
http://www.website1service.com/magentoline/

Bryan Sayler

15. Nov, 2008

Thank you Matt! That image is very helpful

shahriat

26. Mar, 2009

Nice! and helpfull

Abogado

08. May, 2009

Pero qué cara más dura!

Name Jim Rowe

23. Jun, 2009

Hi, very helpful info thanks.

I am trying to build a vertical nav and would like to override the drawItem method. In the navigation.php block but I am having problems getting it to work.

I would prefer to do it this way to follow the magento style, rather than putting lots of javascript handles etc. directly into the template. Anyone had any success doing this?

Letsnurture

01. Jul, 2009

Hi folk,

I’m a newbie for Magento and this tutorial helped me a lot to build top bar navigation in Magento. As far as I know, this top bar navigation is built for category only. Is it possible to list CMS page along with top navigation bar which is in header section of the website.

Is there any good developer’s manual/guide to learn,ride and play with magento?

Thanks again for sharing great knowledge

–
Web-Farmer@letsnurture.com

Rob

30. Jul, 2009

I know I’m a little late on this post, but is there a way to make a parent category link to nothing? I have an ‘About Us’ category with several sub-categories which really serve as sub-pages. I don’t want the ‘About Us’ category link to link to anything since the content is in the sub-linked pages.

I guess it’s possible to manually code this into the top.phtml file, but given that my client may make updates in the future, I’d rather have the navigation in “plain sight”, if you know what I mean. I hope you get to see this. Thanks in advance anyway.

By the way, great site you have going here!

Magento

08. Sep, 2009

Exactly what I searched for

Spenser

03. Dec, 2009

Very cool intro to navigation in magento. Thanks!

Adeel

14. Jan, 2010

i have made several changes in the file top.phtml to customize the navigation bar of header
but its all useless n no changes occur.
kindly help me n tell me the original files of the header navigation bar
thank you