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:

  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!

Tags: , , , ,

15 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

Rufino

28. Jan, 2010

No entiendo una mierda, todo el mundo lo explica para gente que ha trabajado ya en ello. Esot super perdido y no me funciona nada.
Pero en fin…

Thaks

Gus

23. Mar, 2010

Adeel you did the right thing changin the top.html… For some reason the changes don’e show up on the front end right away it may take a few minutes for the system to clear the cache.

Ashely Crandell

28. Apr, 2010

Ok, newbie here. How do we actually get pages to appear in the navigation? I feel like a total loser not knowing that.

J.D.

30. Apr, 2010

Ashey,

I’m a newbie with the same problem. If I understand your question, I found the solution at:

http://www.magentocommerce.com/wiki/modules_reference/english/mage_adminhtml/catalog_category/edit

It is important to get categories right. In the hierarchy of categories, the first category represents the store level (or what Magento calls the root category). The root category does not show in top navigation. So, if your other categories are “sub” categories of the root category, they won’t show up either.

steini

08. Jun, 2010

Hello,

how can I add another navigation, to display a second root category?
Haven’t found anything on the web so far.

Leave a reply