Menu
A list of actions or options that opens from a trigger.
Anatomy
Open a panel of choices anchored to a button. Reach for it when a control needs a small set of related actions, like a dropdown on a chat row or an overflow menu in a toolbar.
Group related items, mark a section with a label, and place a separator between groups.
Nest a submenu by pairing a submenu trigger with its own popup. The chevron on the trigger flips out automatically.
For pickers inside the menu, swap items for checkbox or radio variants. The kit handles the indicator and the selected state.
API
Reference for each part of the component, including its available props and behavior.
Menu
The root. Tracks open state and coordinates keyboard navigation across the items.
MenuTrigger
The control that opens the menu. Use render to swap it for a button or any focusable element.
MenuPopup
The floating panel. Takes positioner props inline so you can set side, sideOffset, align, and alignOffset without reaching for a separate positioner part.
MenuItem
A row inside the popup. Forwards every native item prop, including disabled and onClick. SVG children are auto-sized.
MenuSeparator
A thin divider between groups of items.
MenuSubmenu
A nested root for a submenu. Wrap a submenu trigger and a submenu popup.
MenuSubmenuTrigger
An item that opens its own popup to the side. Renders a trailing chevron so the affordance reads at a glance.
MenuSubmenuPopup
The submenu's popup. Same shape as the main popup and takes the same positioner props.
MenuGroup
A wrapper that ties a label to a set of items for assistive tech.
MenuGroupLabel
A small heading that names a group. Reads as muted text inside the popup.
MenuCheckboxItem
An item that toggles on and off. Renders a check on the selected state and reserves space for it on the unselected state so rows stay aligned.
MenuRadioGroup
A wrapper that ties radio items to a shared value.
MenuRadioItem
A single radio option inside a group. The variant prop picks between a leading check and a trailing dot.