HOW TO: Setup horizontal/vertical navigation and drop-down/fly-out submenus.

Sub menus can be setup as horizontal navigation with drop downs or vertical sub menus that 'fly out'.

In this article we will setup the horizontal navigation with a drop down of categories and sub categories.  The process is almost identical for both horizontal and vertical.

There are two parts to this and although the steps can be combined, it is helpful to understand it in a two step process. The first part being setup of the horizontal navigation and the second being the setup of the drop downs.

Setting up a Navigation Menu:

1. Click on New in the upper right hand corner - and then fill out the required information.
2. Give it a name (example: Flyout Categories - this will NOT display).
3. Save

Step 3: Setup your category level link pages within thisMenu. Create one for each top level category you want to display.

• Click on Add New Link
• In the Display Text area - Name it based on the name you want to display in the navigation (This WILL show)
• Select Product Category from the "Type" drop-down.
• And then choose the top level category.
• Choose the Level of submenus you wish to display

Add a few more links and you can drag them around and nest under each other to create the dropdown structure you want.

You will also need to change the number of dropdowns for each link. This will tell the system how many sub-links you will allow to be shown in the menu underneath the main link.

Repeat Step 3: Create more top level category pages and do this for as many pages as you need.

At this point - you have defined what you want in your vertical (or horizontal) navigation.

To view the navigation on the storefront you need to set this Menu as the Menu on a Menu Widget in your theme.

Go to Themes, Edit theme.

Then Go to Header (or where the menu has been placed in the theme) and find your menu widget.

Next, scroll down until you see the menu widgets and click the "Add" button for "Menu Bar".

Once the widget has been added to your header, click on the edit button.

Once inside the editor, you can select which menu to display along with other options. Make sure to save.

You should now be able to see Dropdown Navigation in your storefront.

Widgets

There are different widgets you can choose for widgets, whether it's going to be across the top or bottom horizontally.  You can also create a menu list.

Menu Widget:

Vertical Dropdown Menu List: