Main nav

v2.0.0

A horizontal list of links to key areas on the website. Typically placed in the header.

One level

The main navigation currently supports one level as a first-version solution. This was done intentionally to keep the component relatively simple, which reduced the complexity for development and accessibility.

For discussion around requirements for more levels see the main navigation community topic.

Mobile icon

In mobile (small) device layouts, the main navigation uses an icon which represents the menu. This follows a common convention in mobile interface design.

Hamburger? The 3 bar icon used on mobile is often affectionately referred to in user interface design as a “Hamburger” or “Hamburger menu” due to its appearance.

Despite this convention, not all users know that a hamburger means "navigation" or "menu". The icon should never be shown on its own and must have accompanying text to avoid assumed understanding of the icon.

See also WCAG2.0 Criterion 1.1.1

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.