Vertical menu
The Design Need:
A second level menu is needed to offer enough structure to the user or the design does not allow for a horizontal menu.
Design Examples:
Design Solution:
By offering a vertical oriented menu, you can offer extra menu options or avoid using a horizontal main menu. If necessary you can use fly-out, dropdown, collapsible or other types of sub-menus to show all needed items. Split the page into at least 2 columns, with one column used to place the navigation. Several forms are often used:
- Flat menu, shows only one level. Subsequent levels must be shown in an alternative way, e.g. using breadcrumbs. This is only suitable for websites with a flat structure.
- Only show sub-levels when the level above is selected, make sure users easily recognize the fact that sub-levels are available.
- Always show sub-levels grouped by level headings, the headings should only be clickable if it leads to a separate page (not if it leads to the first sub-level item).
When to use:
- Too many main items are available
- Extra main items may come up in the future, items can be added as is desirable limited
- A secondary menu is needed to provide sufficient structure
- Design does not allow for a horizontal menu
Why use this solution (rationale):
The advantages of a vertically oriented menu are the flexibility to add extra menu items, and the fact that the actual content can be placed near the top of the page. When adding extra menu items you should be aware that navigation options that disappear below the fold are often not noticed by the user.
You'll find this pattern is often on:
- Left of site
More info elsewhere:
A related design pattern on www.ui-patterns.com
