Menu

Actions, checkboxes, radios, and submenus in a dropdown.

import { Menu } from 'components/UI/Menu'

Items

Put an icon before the text of a Menu.Item. Menu.Separator divides groups of items. A disabled item is muted.

Checkbox items

Menu.CheckboxItem turns a setting on or off. It shows a check mark when it is on.

Radio items

Put Menu.RadioItem parts in a Menu.RadioGroup to select one value. Menu.GroupLabel names the group.

Submenu

Put a Menu.SubmenuTrigger and a Menu.Popup in a Menu.SubmenuRoot. The trigger shows a chevron.

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use Menu for actions. To choose a value, use Select. For site navigation, use NavigationMenu.
Use Menu.LinkItem for an item that opens a page.
In a submenu, pass sideOffset={0} to Menu.Popup, so it touches its parent menu.

API

Props that the library adds. Every part also takes all the Base UI props.

Menu.Popup

Prop	Type	Default	Description
sideOffset	number	4	The gap between the trigger and the menu, in pixels.
container	HTMLElement \| ShadowRoot \| RefObject \| null	–	The element that the menu renders into. The default is the document body.