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.

Context menu

To show the menu when a trigger element is right-clicked, use the Menu.ContextTrigger component.

Context menus are also opened during a long-press of roughly 700ms when the pointer is pen or touch.

Nested menu

To show a nested menu, render another Menu component and use the Menu.TriggerItem component to open the submenu.

Checkbox

To add a checkbox to a menu item, use the Menu.Checkbox component.

Radio Group

To group radio option items, use the Menu.RadioGroup component.

API Reference

Root

PropTypeDefault
anchorPoint
Point
aria-label
string
closeOnSelect
boolean
dir
'rtl' | 'ltr'"ltr"
getRootNode
() => ShadowRoot | Node | Document
highlightedValue
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
onEscapeKeyDown
(event: KeyboardEvent) => void
onExitComplete
() => void
onFocusOutside
(event: FocusOutsideEvent) => void
onHighlightChange
(details: HighlightChangeDetails) => void
onInteractOutside
(event: InteractOutsideEvent) => void
onOpenChange
(details: OpenChangeDetails) => void
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
onSelect
(details: SelectionDetails) => void
open
boolean
positioning
PositioningOptions
present
boolean
unmountOnExit
booleanfalse

Arrow

PropTypeDefault
asChild
boolean

ArrowTip

PropTypeDefault
asChild
boolean

CheckboxItem

PropTypeDefault
checked
boolean
value
string
asChild
boolean
closeOnSelect
boolean
disabled
boolean
onCheckedChange
(checked: boolean) => void
valueText
string

Content

PropTypeDefault
asChild
boolean

ContextTrigger

PropTypeDefault
asChild
boolean

Indicator

PropTypeDefault
asChild
boolean

ItemGroupLabel

PropTypeDefault
asChild
boolean

ItemGroup

PropTypeDefault
asChild
boolean
id
string

ItemIndicator

PropTypeDefault
asChild
boolean

Item

PropTypeDefault
value
string
asChild
boolean
closeOnSelect
boolean
disabled
boolean
valueText
string

ItemText

PropTypeDefault
asChild
boolean

Positioner

PropTypeDefault
asChild
boolean

RadioItemGroup

PropTypeDefault
asChild
boolean
id
string
onValueChange
(e: ValueChangeDetails) => void
value
string

RadioItem

PropTypeDefault
value
string
asChild
boolean
closeOnSelect
boolean
disabled
boolean
valueText
string

Separator

PropTypeDefault
asChild
boolean

TriggerItem

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean