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.

TSX

Group related items, mark a section with a label, and place a separator between groups.

TSX

Nest a submenu by pairing a submenu trigger with its own popup. The chevron on the trigger flips out automatically.

TSX

For pickers inside the menu, swap items for checkbox or radio variants. The kit handles the indicator and the selected state.

TSX

API

Reference for each part of the component, including its available props and behavior.

The root. Tracks open state and coordinates keyboard navigation across the items.

Prop

The control that opens the menu. Use render to swap it for a button or any focusable element.

Prop

The floating panel. Takes positioner props inline so you can set side, sideOffset, align, and alignOffset without reaching for a separate positioner part.

Prop

A row inside the popup. Forwards every native item prop, including disabled and onClick. SVG children are auto-sized.

Prop

A thin divider between groups of items.

Prop

A nested root for a submenu. Wrap a submenu trigger and a submenu popup.

Prop

An item that opens its own popup to the side. Renders a trailing chevron so the affordance reads at a glance.

Prop

The submenu's popup. Same shape as the main popup and takes the same positioner props.

Prop

A wrapper that ties a label to a set of items for assistive tech.

Prop

A small heading that names a group. Reads as muted text inside the popup.

Prop

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.

Prop

A wrapper that ties radio items to a shared value.

Prop

A single radio option inside a group. The variant prop picks between a leading check and a trailing dot.

Prop