Menu is a wrapper component that wraps a
MenuDisclosure element and a
MenuList element. When using a
Menu, the child of your
MenuDisclosure will be rendered and, when clicked, will generate a
Popover with your
MenuList and its children.
The entire menu can be disabled via the
Note: The direct child of
MenuDisclosure should be able to accept the following props. TypeScript currently doesn't support the enforcement of this.
onClick– toggles the menu
onMouseOver- show the tooltip
onMouseOut- hides the tooltip
ref- tooltip and popover placement
To position the overlay that contains
MenuList add the
placement prop on
pin props allow you to enforce the placement to varying degrees.
Control the state of the menu with the React
Toggling the menu button on hover
Hovering in this card will show the menu button.
MenuList displays a list of choices.
Focus & Keyboard Controls
MenuList is focused the
down arrow keys will move focus through the menu items within the list.
Menu Item Spacing
MenuList accepts a
compact prop that will make the spacing between the
MenuItem is an
HTMLButtonElement that supports all of the
BoxProps properties. Use this for triggering actions from with in a
MenuList. For example, opening a dialog.
For accessibility reasons, if you want your
MenuItem to link somewhere then you can use the
itemRole prop to identify it as a link.
An icon can optionally be assigned to each item via the
Menu will close by default when
MenuItem is clicked, after the
onClick handler, if there is one. Any component, such as a
Dialog, that is meant to be conditionally shown on click, should not be nested inside
MenuList since it will be removed.
Note: If a
MenuItem does not have an icon, but its sibling(s) does have an icon, the
MenuItem without an icon will automatically allocate space on the left-hand side to align its text up with its sibling(s). This behavior applies to the
MenuItem children of
detail prop to provide explanatory detail to a given item.
disabled to indicate an option that is not currently available.
MenuGroup is a way to group together similar collections of
It supports an optional
label prop to place a heading above the
MenuItems. When placed within a scrolling container the label will stick to the top edge while the
MenuGroup is visible.
Recipe: A Filterable Menu Overlay
InputSearch can be incorporated into a menu popover to filter menu items by search query. Click the
cheese button below to try it out.