Menu

A list of actions in a dropdown, enhanced with keyboard navigation.

API reference

Import the component and place its parts the following way:

Anatomy
import { Menu } from '@base-ui-components/react/menu';

<Menu.Root>
  <Menu.Trigger />
  <Menu.Portal>
    <Menu.Backdrop />
    <Menu.Positioner>
      <Menu.Popup>
        <Menu.Arrow />
        <Menu.Item />
        <Menu.Separator />
        <Menu.Group>
          <Menu.GroupLabel />
        </Menu.Group>
        <Menu.RadioGroup>
          <Menu.RadioItem />
        </Menu.RadioGroup>
        <Menu.CheckboxItem />

        {/* Submenu */}
        <Menu.Root>
          <Menu.SubmenuTrigger />
          <Menu.Portal>
            <Menu.Positioner>
              <Menu.Popup>...</Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        </Menu.Root>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>

Root

Groups all parts of the menu. Doesn’t render its own HTML element.

PropTypeDefault
closeParentOnEscbooleantrue
defaultOpenbooleanfalse
delaynumber100
disabledbooleanfalse
loopbooleantrue
onOpenChange(open, event) => voidundefined
openbooleanundefined
openOnHoverbooleanundefined
orientation'horizontal' | 'vertical''vertical'

Trigger

A button that opens the menu. Renders a <button> element.

PropTypeDefault
classNamestring | (state) => stringundefined
disabledbooleanfalse
labelstringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
AttributeType
data-popup-openEmpty attribute
data-pressedEmpty attribute

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to the <body>.

PropTypeDefault
containerReact.Ref | HTMLElement | nullundefined
keepMountedbooleanfalse

Positioner

Positions the menu popup against the trigger. Renders a <div> element.

PropTypeDefault
align'start' | 'center' | 'end''center'
alignOffsetnumber0
anchor| React.Ref
| Element
| VirtualElement
| (() => Element
| VirtualElement
| null)
| null
undefined
arrowPaddingnumber5
classNamestring | (state) => stringundefined
collisionBoundary| 'clippingAncestors'
| Element
| Element[]
| Rect
'clipping-ancestors'
collisionPaddingnumber | Rect5
keepMountedbooleanfalse
positionMethod'absolute' | 'fixed''absolute'
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
side| 'bottom'
| 'inline-end'
| 'inline-start'
| 'left'
| 'right'
| 'top'
'bottom'
sideOffsetnumber0
stickybooleanfalse
AttributeType
data-anchor-hiddenEmpty attribute
data-openEmpty attribute
data-uncheckedEmpty attribute
CSS VariableType
--anchor-heightnumber
--anchor-widthnumber
--available-heightnumber
--available-widthnumber
--transform-originstring

A container for the menu items. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
idstringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
AttributeType
data-closedEmpty attribute
data-ending-styleEmpty attribute
data-openEmpty attribute
data-starting-styleEmpty attribute

Arrow

Displays an element positioned against the menu anchor. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined

Item

An individual interactive item in the menu. Renders a <div> element.

PropTypeDefault
closeOnClickbooleantrue
disabledbooleanfalse
idstringundefined
labelstringundefined
onClick(event) => voidundefined

Group

Groups related menu items with the corresponding label. Renders a <div> element.

PropTypeDefault
childrenReact.ReactNodeundefined
classNamestring | (state) => stringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined

Group Label

An accessible label that is automatically associated with its parent group. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined

Radio Group

Groups related radio items. Renders a <div> element.

PropTypeDefault
childrenReact.ReactNodeundefined
classNamestring | (state) => stringundefined
defaultValueanyundefined
onValueChange(value, event) => void() => {}
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
valueanyundefined

Radio Item

A menu item that works like a radio button in a given group. Renders a <div> element.

PropTypeDefault
valueanyundefined
closeOnClickbooleantrue
disabledbooleanfalse
idstringundefined
labelstringundefined
onClick(event) => voidundefined
AttributeType
data-checkedEmpty attribute
data-uncheckedEmpty attribute

Radio Item Indicator

Indicates whether the radio item is selected. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
keepMountedbooleantrue
render| React.ReactElement
| (props, state) => React.ReactElement
undefined

Checkbox Item

A menu item that toggles a setting on or off. Renders a <div> element.

PropTypeDefault
checkedbooleanundefined
closeOnClickbooleantrue
defaultCheckedbooleanfalse
disabledbooleanfalse
idstringundefined
labelstringundefined
onCheckedChangefunctionundefined
onClick(event) => voidundefined

Checkbox Item Indicator

Indicates whether the checkbox item is ticked. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
keepMountedbooleantrue
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
AttributeType
data-checkedEmpty attribute
data-uncheckedEmpty attribute

A menu item that opens a submenu. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
disabledbooleanfalse
labelstringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
AttributeType
data-popup-openEmpty attribute

Separator

A separator element accessible to screen readers. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined