Vertical menu - nschonni/wet-boew GitHub Wiki
Project lead: Paul Jackson (@pjackson28)
Secondary navigation that helps users navigate to associated content within a section. The vertical menu can be used as secondary navigation on its own, or combined with a mega menu.
Variation (Contextual Vertical Menu): The menu can change depending on the content page being viewed, so as to always show the most relevant navigation options. Note: This behaviour is not yet available in the Web Experience Toolkit.- Meets users expectation that navigation is at the top or on the left-side of the screen. (Footnote 1)
- A vertical menu provides a simple, flexible way to link to any related content in a section.
- More room for longer menu item labels.
- Many menu items can be displayed.
- The hierarchy of menu items can be displayed.
There are three options that can be used with a vertical menu:
A static menu that expands to show contextual navigation as sub-items within the menu where appropriate. In this case, consideration must be made as to the level of the content displayed. Menus cannot reasonably show more than three levels of content simultaneously.
A static menu that does not change throughout the entire section. This is the simplest menu to implement, and is suitable for smaller sections where all navigation items for the section can fit into a single menu.
A contextual menu that changes depending on the content. In this case, it is not necessary to display different levels of items within the menu. Instead, the menu need only show the current level and one level above. This provides only the navigation items that are actually relevant to the user at the time. Another advantage of this approach is that the site’s organization is not limited to an arbitrary number of levels (that can be reasonably represented in the menu). Instead, the menu can display appropriate navigation items for any page within the site. Note: This behaviour is not yet available in the Web Experience Toolkit.
For very small sites, the horizontal site navigation bar may be sufficient to allow users to navigate through the content. However, in some cases secondary navigation will be required to provide access to associated content.
- Part of the site requires navigation across a set of related pages that are distinct and unrelated to other sub-sections.
- There is sufficient space in the content area to include a vertical menu.
- Menu items have labels of a length which would be difficult or impossible to include in a horizontal menu.
- There are too many sub-pages within that section.
- You would like to have flexibility in how many items will be included in your secondary navigation; that is, more menu items may be needed in the future.
- You must provide users with navigation within a complex document or process.
- There is not enough content within a section to warrant its own navigation items.
- There is not enough space in your content area to include a vertical menu.
The vertical menu appears at the far left of the content area of a page. The list is formatted to ensure that it appears distinct from page content.
Vertical menus can include section headings if this can help organize content within the section. Headings must be clearly distinct from the other items in the menu. Headings must be linked to an appropriate landing page. Working example with a sub-site header in the vertical menu.
The menu item for the currently displayed page is visually distinct from the other items. If sub-items are displayed in a vertical menu, they must be visually distinct from the main items.
If including sub-items in your vertical menu, ensure that the sub-items are visible to users. In longer vertical menus, sub-items may appear so low on the page that they are not clearly relevant to the page being viewed. Testing should be used to ensure that users can navigate the site effectively.
If navigation items change when viewing different pages (either by displaying sub-items within the existing menu items or by replacing the entire menu with one relevant to the current page), users may not know that the navigation has updated.
Do not use styles (for example, alternating row background color banding) unless they convey meaning.
Items in a secondary menu are related to the content page currently selected. Avoid including navigation items that are not relevant to the current page. The horizontal site navigation bar provides access to higher level content, so it is not necessary to include these items in your vertical menu. A vertical menu should not provide the exact same options as a mega menu, otherwise, one of them is redundant.
If necessary, sub-items can be displayed below menu items. It can be difficult for users to visually distinguish between heading levels, so if possible use no more than three levels of sub-items in one menu.
If possible, consider changing the menu dynamically to display only the navigation items relevant to the current page, rather than trying to display the entire hierarchy of the page in one menu. To allow users to navigate up the site’s hierarchy, it may be necessary to include menu items for higher levels in the menu. Breadcrumbs may serve this purpose as well—testing should be used to ensure that users can navigate the site effectively. Note: This behaviour is not yet available in the Web Experience Toolkit.
Put relevant links in the content area of a Web page as well as in the vertical menu. Users will generally look in the content area of a page before looking in the vertical menu. (Footnote 1) If links to content are only in the vertical menu, then users may not immediately locate them.
- There are no known technical issues.If you find one, please contribute by filing an issue.
- Menu structures should be usability tested before they are implemented. Techniques such as card sorting can help create usable menus.
- It would be nice to add a contextual menu that changes as the user goes deeper into the content.
- Costello Wachs, Maggie. jQuery Menu: Dropdown, iPod Drilldown, and flyout styles with ARIA Support and ThemeRoller Ready. Filament group.com, April 2, 2009. Mon. Nov. 21, 2011.
- Hudson, Roger. Navigation Accessibility 1:Menus and Links. Usability.com.au, Aug. 2004. Mon. Nov. 21, 2011.
- Mardiros internet marketing. Good Web Site Navigation – Reaching the Information Instantly. Mardiros internet marketing. Mon. Nov. 21, 2011.
- McGovern, Gerry. Confusing menus and links: the web’s biggest Challenge. Gerry McGovern New Thinking, Oct. 19, 2009. Mon. Nov. 21, 2011.
- Nielsen, Jakob. Alertbox: Is Navigation Useful. Useit.com: Jakob Nielsen’s Website. Nielsen Norman Group, Jan. 9, 2000. Mon. Nov. 21, 2011.
- Lazaris, Louis. The Case Against Vertical Navigation. Smashing Magazine, Jan. 11, 2010. Mon. Nov. 21, 2011.
- Australian Government. australia.gov.au, Aug. 12, 2011. Mon. Nov. 21, 2011.
Footnote 1 - Caddick, Richard. How eye tracking is informing our navigation design, Cxpartners, July 24, 2009. Mon. Nov. 19, 2011.