Menu

Interface of Menu
🏗 Coming Soon

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 disabled prop.

Note: The direct child of MenuDisclosure should be able to accept the following props. TypeScript currently doesn't support the enforcement of this.

  • disabled
  • onClick – toggles the menu
  • onFocus - and onMouseOver - show the tooltip
  • onBlur - and onMouseOut - hides the tooltip
  • ref - tooltip and popover placement

To position the overlay that contains MenuList add the placement prop on MenuList. The escapeWithReference and pin props allow you to enforce the placement to varying degrees.

Controlled Menu

Control the state of the menu with the React useState hook.

Menu Closed

Toggling the menu button on hover

Hovering in this card will show the menu button.

Interface of MenuList
🏗 Coming Soon

MenuList displays a list of choices.

Focus & Keyboard Controls

When a MenuList is focused the up and down arrow keys will move focus through the menu items within the list.

A MenuList accepts a compact prop that will make the spacing between the MenuItems smaller.

Interface of MenuItem
🏗 Coming Soon

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 icon property.

Note: 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.

Icon Support

Artwork Support

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 MenuList and MenuGroup elements.

Detail Text

Use the detail prop to provide explanatory detail to a given item.

Disabled

Use the disabled to indicate an option that is not currently available.

Interface of MenuItem
🏗 Coming Soon

MenuGroup is a way to group together similar collections of MenuItems.

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.