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.
Opening and Closing
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)
Navigation
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. MenuItemRadiodescription is announced via aria-describedby and is not part of type-ahead.
Search Navigation
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
Submenu Navigation
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
Reordering items
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.