Navigation Menu
A site navigation component with dropdown submenus
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsWrap in a <nav> landmark
The navigation must be wrapped in a <nav> element with a descriptive aria-label.
aria-expanded on submenu triggers
Buttons that open submenus must have aria-expanded="true/false".
Full keyboard navigation
Support arrow keys to navigate within the menu, Enter/Space to open submenus, and Escape to close them.
aria-current="page" on active link
The link for the current page must have aria-current="page".
aria-haspopup on submenu triggers
Add aria-haspopup="true" to buttons that open submenus.
Close submenu with Escape
Pressing Escape must close any open submenu and return focus to the trigger.
Logical focus flow after submenu
After closing a submenu, focus should return to the triggering menu item.
Do not use hover-only submenu opening
Submenus must also be openable via keyboard for users who cannot use a mouse.
Do not duplicate navigation landmark labels
If there are multiple <nav> elements on a page, each must have a unique aria-label.
Additional checks
AppBar + Drawer combination
For mobile navigation, combine AppBar with a Drawer and ensure focus management between the two.
Code sample
Implementation notes
- –Use component="header" on AppBar for semantic markup.
- –MUI Menu automatically handles focus management and keyboard navigation.
- –You must manually add aria-current to the current page link.