Top Level Menu Only
By default Magento creates a neat layered menu system which displays top level categories and their sub-categories as a dropdown menu. However it may be possible that you only want to list the top-level categories, allowing the layered navigation to take control of any sub-categories. You may also want to hide them from the menu if you are using static blocks to navigate through sub-categories. The location of the original code responsible for outputting the menu is here:
app > design > frontend > default > your_theme > template > catalog > navigation > top.phtml
<ul id="nav"> <?php foreach ($this->getStoreCategories() as $_category): ?> <?php echo $this->drawItem($_category) ?> <?php endforeach ?> </ul>
It uses the call $this->drawItem($_category), which brings back the top level categories and their subcategories. If you want to only display the top level categories, simply change this code to the following:
<ul id="nav"> <?php foreach ($this->getStoreCategories() as $_category): ?> <li><a href="<?php echo $this->getCategoryUrl($_category); ?>" title="<?php echo $this->htmlEscape($_category->getName()); ?>"><?php echo $this->htmlEscape($_category->getName()); ?></a></li> <?php endforeach ?> </ul>
This code also adds a title tag to the links, which is a big improvement in SEO terms to the navigation structure – something that Google will pay attention to with an e-commerce shop.
February 25th, 2010
Is there a way to do this with all categories and sub-cats? I noticed that your putting in an which is dynamically created in the first example but manually created in the second. Is there a reason for this? I’m thinking in terms of adding on ids so that one could use javascript to manage appearances
February 26th, 2010
Hi Spenser,
Yes there is – it would mean finding your navigation.php in the code folders – you should then copy it to a local replica.
You will need to find the function drawItem() – you can simply add id’s (don’t forget to make them unique) to the pure php.
March 3rd, 2010
Hi there
very interesting.
what about if i just wanted to show the top and 1st level sub-category
but not show any 2nd level.
e.g. i have this setup: Beds > Childrens > Racecars
but in the main menu i only wanted to show: Beds > Childrens
March 3rd, 2010
Hi Mitchell,
Fortunately that is quite an easy one to solve – Magento has this feature already built in!
What you need to do is navigate in your control panel to system > configuration – then you will find on the left a tab for catalog > catalog.
There is then a tab called Category Top Navigation and you can set the Maximal Depth – in your case this will be 2.
Then you can clear your cache and the change should take effect
Thanks for visiting!
March 4th, 2010
@Rob,
Awesome suggestion. I looked into it and added ids to a local copy of navigation.php; it worked like a charm. Thank you so much for your suggestion.
June 3rd, 2010
Hi,
I m very thankful to all of you specially Rob who clear me.
July 2nd, 2010
I feel this solution while it does working is a way to fix an non issue that can be solved more easily via configuration of Magento…
Browse to: Configuration > Catalog
Section: “Category Top Navigation”
“Maximal Depth”: 0 Default will show all levels
Set: “Maximal Depth”: 1 Will only show top level navigation – resolve issue solved in this tutorial
Set: “Maximal Depth”: 2 Will stop second level fly out menu and so on…
Hope this helps someone…
July 3rd, 2010
As I contributed without reading all comments first and repeated Rob’s comment, I thought I would add further info…
Changing to the “Maximal Depth” to 0 also effects other category display methods. For example the very helpful Module “Easy Catalog Images”, shows child categories with images in the body of your catalog. Has an option “Show child categories” which shows links to child categories. Setting “Maximal Depth” to 0 disables this.
This goes to show there are circumstances where the global control of levels displayed via “Maximal Depth” may not work for you…
The following code is as per Adam’s, showing only top level tabs, except the html structure is the same as the tab html created by drawItem and includes the active state CSS class…
getStoreCategories() as $_category): ?>
July 5th, 2010
I was looking for a code that makes the top menu to show only the first 3 or 4 menu items.
Most of our websites have 2 menus, one on the top (horizontally) and a second one on the left or right (vertically) As the side menus can show all the menu options because of space limitation, the top menu should only show couple of category items and some static pages. What do you think guys? how can we do that?
August 6th, 2010
We have the case where we have
level 1
level 2
level 3
what we want to do is not make Magento reload the page when level 2 is clicked, it contains no products, we just want it to expand and show the level 3 categories that have products.
any ideas?
e.g.
books
programming
foreign language books
cooking
so when foreign language books was clicked, magento would not load that category page, simply show the sub categories, like a little js hack
books
programming
foreign language books
spanish
czech
german
french
cooking
August 20th, 2010
How do you disable the hyperlinks of the categories in the top level menu…?