Navigation menus
When and how to use this component
The horizontal menu is used to display the first 2 levels of pages within a website's architecture.
For levels 3 and below the menu should be complemented by using navigation blocks to drill down to sub-pages.
Guidelines
Amount of Items
Due to limited horizontal space, especially on low resolution screens, the number of items on the first level of the menu should be 3-5 items.
Labeling
Labels on the first level of the menu should be simple and composed of 1 to 3 words (for the English language version of the menu).
Using 3 words should be an exception when you want to refer to two related topics (e.g. News and events / Contracts and funding).
When to use this component
- if you need an alternative to the listing navigation blocks
- only for improved sites
- only with a basic page header
- below the basic page header
- on every page of the website
Do not use this component
- with a default page header
Resources
- https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
- https://www.w3.org/WAI/tutorials/menus/
- https://dequeuniversity.com/library/aria/menus/megamenu
- https://github.com/adobe-accessibility/Accessible-Mega-Menu
- https://ux.stackexchange.com/questions/5124/what-are-good-rules-for-naming-menu-items/5126
- https://thrivehive.com/navigation-menu-best-practices