Key	Description	State
`Space`	Opens the menu and focuses on the first not disabled item.	`MenuButton`
	Opens the submenu and focuses on the first not disabled item.	`MenuItemButton`
	Activates the focused item and closes all menus.	`MenuItem`
	Checks the focused item.	`MenuOptionItem`
`Enter`	Opens the menu and focuses on the first not disabled item.	`MenuButton`
	Opens the submenu and focuses on the first not disabled item.	`MenuItemButton`
	Activates the focused item and closes all menus.	`MenuItem`
`ArrowRight`	Opens the submenu and focuses on the first not disabled item.	`MenuItemButton`
`ArrowLeft`	For submenus, closes the submenu and focuses on the main menu.	`MenuList`
`ArrowUp`	Opens the menu and focuses on the last not disabled item.	`MenuButton`
	Focuses on the previous not disabled item. If on the first item, focuses on the last not disabled item.	`MenuList`
`ArrowDown`	Opens the menu and focuses on the first not disabled item.	`MenuButton`
	Focuses on the next not disabled item. If on the last item, focuses on the first not disabled item.	`MenuList`
`Home`	Focuses on the first not disabled item.	`MenuList`
`End`	Focuses on the last not disabled item.	`MenuList`
`Escape`	Closes all menus.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`MenuButton`, `MenuItemButton`	`role="button"`	Indicates that it is a button.
	`id`	`id` used to associate with `MenuList`.
	`aria-haspopup`	Set to `menu`.
	`aria-expanded`	Set to `"true"` when menu is open, `"false"` when closed.
	`aria-controls`	Set to the `id` of the related `MenuList` when menu is open, `undefined` when closed.
`MenuList`	`role="menu"`	Indicates that it is a menu.
	`id`	`id` used to associate with `MenuButton` or `MenuItemButton`.
	`tabindex`	Set to `"-1"`.
	`aria-activedescendant`	Set to the `id` of the focused item.
	`aria-labelledby`	Set to the `id` of the related `MenuButton` or `MenuItemButton`.
	`aria-hidden`	Set to `"true"` when menu is open, `"false"` when closed.
`MenuItem`	`role="menuitem"`	Indicates that it is a menu item.
	`id`	`id` used to associate with `MenuList`.
	`tabindex`	Set to `"0"` when focused, `"-1"` otherwise.
	`aria-disabled`	Set to `"true"` when the item is disabled.
`MenuOptionGroup`	`role="group"`	Indicates that it is a group.
`MenuOptionItem`	`role`	Set to `menuitemradio` when `MenuOptionGroup` type is `"radio"`, set to `"menuitemcheckbox"` when type is `"checkbox"`.
	`tabindex`	Set to `"0"` when focused, `"-1"` otherwise.
	`aria-checked`	Set to `"true"` when item is checked, `"false"` when unchecked.
	`aria-disabled`	Set to `"true"` when the item is disabled.

Edit this page on GitHub