menu_navigation.md

category	menu_navigation
category_description	Accessible menus and hierarchical navigation.

Overview

Menus organise links and commands; hierarchical menus need clear structure and keyboard support. Use lists for simple nav and ARIA menu roles for complex menus.

Relevant WCAG 2.1 success criteria

• 1.3.1 Info & Relationships (Level A) – Group menu items and submenus semantically.
• 2.1.1 Keyboard (Level A) – Arrow keys navigate menus and submenus. (WCAG 2.1.1 – Keyboard)
• 2.4.7 Focus Visible (Level AA) – Menu items show visible focus. (WCAG 2.4.7 – Focus Visible)
• 3.2.3 Consistent Navigation (Level AA) – Menu appears in the same order across pages. (WCAG 3.2.3 – Consistent Navigation)

Technical guidance

• For simple nav, use a <ul> with <li> containing <a> links.
• For complex menus, set role="menubar" on the root, role="menuitem" on each item and role="menu" on submenus; manage aria-haspopup and aria-expanded.
• Support arrow key navigation according to orientation (horizontal or vertical) and provide Esc to close submenus.
• Provide clear focus styling on each menu item; hide submenus when not active.

Code example

Simple nav

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Menu with submenu

<ul role="menubar">
  <li role="none">
    <button role="menuitem" aria-haspopup="true" aria-expanded="false">Products</button>
    <ul role="menu" hidden>
      <li role="none"><a role="menuitem" href="/phones">Phones</a></li>
      <li role="none"><a role="menuitem" href="/tablets">Tablets</a></li>
    </ul>
  </li>
</ul>