Menu

A list of options that appears when a user interacts with a button.

Anatomy

To set up the menu correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Menu component in your project. Let’s take a look at the most basic example:

Listening to item selection

Pass the onSelect prop to the Menu component to perform some custom logic when an item is selected. The callback is invoked with the id of the item.

Grouping menu items

When the number of menu items gets much, it might be useful to group related menu items. To achieve this, render the Menu.ItemGroup component around the Menu.Item components. The Menu.ItemGroupLabel component can be used to add a label to the group.

Separating menu items

To separate menu items, render the Menu.Separator component.

Checkbox and Radio option items

To show a checkbox or radio option item, use the Menu.OptionItem component. Depending on the type prop, the item will be rendered as a checkbox or radio option item. The name prop is used to group the items together, and the value prop is used to identify the item.

To manage the state of the option items pass the value and onValueChange props to the Menu component.

API Reference

Item

PropTypeDefault
id
string
asChild
boolean
closeOnSelect
boolean
disabled
boolean
valueText
string

Root

PropTypeDefault
anchorPoint
Point
aria-label
string
closeOnSelect
boolean
dir
'ltr' | 'rtl'"ltr"
getRootNode
() => ShadowRoot | Node | Document
highlightedId
string
id
string
ids
Partial<{ trigger: string contextTrigger: string content: string label(id: string): string group(id: string): string positioner: string arrow: string }>
lazyMount
booleanfalse
loop
boolean
onExitComplete
() => void
onFocusOutside
(event: FocusOutsideEvent) => void
onInteractOutside
(event: InteractOutsideEvent) => void
onOpenChange
(details: OpenChangeDetails) => void
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
onSelect
(details: SelectionDetails) => void
onValueChange
(details: ValueChangeDetails) => void
open
boolean
positioning
PositioningOptions
present
boolean
unmountOnExit
booleanfalse
value
Record<string, string | string[]>

Arrow

PropTypeDefault
asChild
boolean

Content

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean

ArrowTip

PropTypeDefault
asChild
boolean

ItemGroup

PropTypeDefault
id
string
asChild
boolean

Separator

PropTypeDefault
asChild
boolean

OptionItem

PropTypeDefault
name
string
type
'checkbox' | 'radio'
value
string
asChild
boolean
closeOnSelect
boolean
disabled
boolean
onCheckedChange
(checked: boolean) => void
valueText
string

Positioner

PropTypeDefault
asChild
boolean

TriggerItem

PropTypeDefault
asChild
boolean

ContextTrigger

PropTypeDefault
asChild
boolean

ItemGroupLabel

PropTypeDefault
htmlFor
string
asChild
boolean