Access a set of commands within a menu bar or dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.
npm install ariakit
Learn more in Getting started.
useMenuState() <MenuButton> <MenuButtonArrow /> </MenuButton> <MenuList|Menu> <MenuArrow /> <MenuHeading /> <MenuDescription /> <MenuDismiss /> <MenuGroup> <MenuGroupLabel /> <MenuItem /> <MenuItemCheckbox|MenuItemRadio> <MenuItemCheck /> </MenuItemCheckbox|MenuItemRadio> <MenuSeparator /> </MenuGroup> </MenuList|Menu> useMenuBarState() <MenuBar />
When browsing the list with a keyboard (or hovering over items with the mouse when the focusOnHover
prop is true
), the active item element will have a data-active-item
attribute. You can use this attribute to style the active item:
.menu-item[data-active-item] {
background-color: hsl(204 100% 40%);
color: white;
}
Learn more in Styling.
Because they behave similarly, it may not be obvious when to use Menu
and when to use Select. Here are some guidelines to help you decide:
Select
when the purpose is to select a value from a list of options. For example, a dropdown to select a country from a list of countries.Menu
when the purpose is to access a set of commands, actions, or links. For example, a dropdown to access a set of commands to edit a document.There are also some differences in how both components behave. Similarly to the native <select>
element, the Select
button's text will reflect the selected item. The button may also have a label in addition to the value. When the SelectPopover
opens, the selected item will be focused and brought into view.
On the other hand, MenuButton
can't hold a value, only a label, which won't reflect the active item. It's usually a static call to action.