By default, Magento uses a horizontal drop-down menu. In this post we will ‘stand on the shoulders of giants’ and use some jQuery to create an accordion style sidebar (vertical) menu.

This is based on a installation of Magento. The fantastic extension we will be using to create the sidebar based vertical menu is called ‘Vertical Navigation with CSS Classes‘ by Rico Neitzel.

So first of, install the aforementioned extension in the Magento backend either with Magento Connect. Alternatively, use SSH if you have shell access.

Now download the latest jQuery (obviously change the file name in the XML below if it differs) and my little snippet of jQuery goodness here: jquery.menubf and save it into the js/extjs/ folder.
Now, in your local.xml file (and if you aren’t using one, why not?), add the following in the ‘head’ section:


That’s all there is to it. You should now have the root level categories ‘clickable’ and expanding to show the sub-categories below.

Note, this is setup to work when all product categories are within the default root category. If you are using a multi-store setup with multiple root categories, you will need to amend the jQuery file.

Learn to use CSS effectively, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp