Code example
Common baseline
Wrap 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.
Design system implementations
Additional checks
Set component="nav" and aria-label on Toolbar
Use Toolbar component="nav" with aria-label="Main navigation". This renders as <nav aria-label> and enables screen reader landmark navigation.
Add aria-haspopup and aria-expanded to submenu triggers
Set aria-haspopup="menu" and aria-expanded on dropdown trigger buttons so screen readers can identify submenus and their open state.
Add aria-current="page" to the active link
MUI does not set aria-current automatically. Add aria-current="page" directly to the link matching the current route.
Code sample
Implementation notes
- –Use Toolbar component="nav" to provide the <nav> landmark; add aria-label to distinguish it from other nav elements.
- –MUI Menu automatically handles arrow key navigation, Escape to close, and focus restoration.
- –Add aria-current="page" to the active link manually — MUI does not handle this automatically.
- –Use MenuListProps={{ "aria-label": "..." }} to add an accessible label to the menu list.