Accessible menus ensure all users can navigate, understand, and interact with menu options effectively. When using Menu and NavigableMenu, follow these best practices.
Menus provide comprehensive keyboard navigation for efficient interaction.
Users can open and close menus using standard keyboard patterns.
- Enter or Space: Opens the menu when trigger is focused
- Escape: Closes the menu and returns focus to trigger
- Tab: Moves focus away from the menu (closes it)
Navigate menu items efficiently with arrow keys.
- Arrow Down: Move focus to next item
- Arrow Up: Move focus to previous item
- Home: Move focus to first item
- End: Move focus to last item
- Enter or Space: Activate focused item
- Type-ahead: Jump to the next item whose visible label starts with the typed character.
MenuItemRadio description is announced via aria-describedby and is not part of type-ahead.
In NavigableMenu with search enabled, keyboard navigation works seamlessly.
- Arrow Down from search input: Move focus to first menu item
- Arrow Up from first item: Return focus to search input
- Escape: Clear search if search has value, otherwise close menu
- Enter: Activate focused item or submit search
Navigate submenus efficiently with keyboard.
- Arrow Right: Enter submenu
- Arrow Left: Navigate back to parent menu
- Enter or Space: Activate submenu trigger to enter submenu
- Breadcrumb back button: Navigate back using Enter or Space
When sortable is enabled on Menu or NavigableMenu, focus the drag handle (or the row when drag-from-row is allowed) and use:
- Space or Enter: Grab the item for keyboard reorder; drop when finished
- Arrow Up / Arrow Down: Move the grabbed item
- Escape: Cancel reorder and restore the previous order
Live region announcements describe grab, move, drop, and cancel. Pointer drag shows a floating preview of the item while the source row stays in the list as a placeholder.
