Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Menu

Menu is a component that displays a common dropdown menu.

Source@yamada-ui/menu

The Menu follows the WAI-ARIA - Menu and Menubar Pattern and WAI-ARIA - Menu Button Pattern for accessibility.

Keyboard Navigation

KeyDescriptionState
SpaceOpens 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
EnterOpens 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
ArrowRightOpens the submenu and focuses on the first not disabled item.MenuItemButton
ArrowLeftFor submenus, closes the submenu and focuses on the main menu.MenuList
ArrowUpOpens 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
ArrowDownOpens 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
HomeFocuses on the first not disabled item.MenuList
EndFocuses on the last not disabled item.MenuList
EscapeCloses all menus.-

ARIA Roles and Attributes

ComponentRoles and AttributesUsage
MenuButton, MenuItemButtonrole="button"Indicates that it is a button.
idid used to associate with MenuList.
aria-haspopupSet to menu.
aria-expandedSet to "true" when menu is open, "false" when closed.
aria-controlsSet to the id of the related MenuList when menu is open, undefined when closed.
MenuListrole="menu"Indicates that it is a menu.
idid used to associate with MenuButton or MenuItemButton.
tabindexSet to "-1".
aria-activedescendantSet to the id of the focused item.
aria-labelledbySet to the id of the related MenuButton or MenuItemButton.
aria-hiddenSet to "true" when menu is open, "false" when closed.
MenuItemrole="menuitem"Indicates that it is a menu item.
idid used to associate with MenuList.
tabindexSet to "0" when focused, "-1" otherwise.
aria-disabledSet to "true" when the item is disabled.
MenuOptionGrouprole="group"Indicates that it is a group.
MenuOptionItemroleSet to menuitemradio when MenuOptionGroup type is "radio", set to "menuitemcheckbox" when type is "checkbox".
tabindexSet to "0" when focused, "-1" otherwise.
aria-checkedSet to "true" when item is checked, "false" when unchecked.
aria-disabledSet to "true" when the item is disabled.

Edit this page on GitHub

PreviousDrawerNextContextMenu