Menu

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

API reference

Menu.Root

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

PropTypeDefaultResponsive
defaultOpen
boolean
falseNo
open
boolean
-No
onOpenChange
(open, event) => void
-No
closeParentOnEsc
boolean
trueNo
modal
boolean
trueNo
onOpenChangeComplete
(open) => void
-No
disabled
boolean
falseNo
openOnHover
boolean
-No
delay
number
100No
loop
boolean
trueNo
orientation
horizontalvertical
verticalNo
className
string
-No
style
CSSProperties
-No

Menu.Trigger

The trigger by default render a simple unstyled button. Because menus can be rendered in different ways, we recommend using the render prop to render a custom trigger.

<Menu.Trigger render={props => <Button {...props} />} />
PropTypeDefaultResponsive
render
React.ReactElement(props, state) => React.ReactElement
-No
className
string
-No
style
CSSProperties
-No

Menu.Positioner

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

PropTypeDefaultResponsive
align
startcenterend
centerNo
alignOffset
number(data) => number
0No
side
bottominline-endinline-startleftrighttop
bottomNo
sideOffset
number(data) => number
0No
arrowPadding
number
5No
anchor
React.RefElementVirtualElement(() => Element | VirtualElement | null)null
-No
collisionBoundary
clipping-ancestorsElementElement[]Rect
clipping-ancestorsNo
collisionPadding
numberRect
5No
sticky
boolean
falseNo
positionMethod
absolutefixed
absoluteNo
trackAnchor
boolean
trueNo
className
string
-No
style
CSSProperties
-No

Menu.Item

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

PropTypeDefaultResponsive
label
string
-No
onClick
(event) => void
-No
closeOnClick
boolean
trueNo
disabled
boolean
falseNo
className
string
-No
style
CSSProperties
-No

Examples

Open on hover

To create a menu that opens on hover, add the openOnHover prop to the Root part. You can additionally configure how quickly the menu opens on hover using the delay prop.

<Menu.Root openOnHover delay={100}>
  <Menu.Trigger
    render={props => (
      <Button
        {...props}
        size="medium"
        variant="secondary"
        iconEnd="chevron-down"
      >
        Menu
      </Button>
    )}
  />
  <Menu.Portal>
    <Menu.Positioner sideOffset={8} align="start">
      <Menu.Popup>
        <Menu.Item>Settings</Menu.Item>
        <Menu.Item>Invite new members</Menu.Item>
        <Menu.Item>Download app</Menu.Item>
        <Menu.Item>Log out</Menu.Item>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>

Nested navigation

You can nest menus to create a more complex navigation structure.

<Menu.Trigger
  render={props => (
    <Button
      {...props}
      size="small"
      variant="secondary"
      iconEnd={<Icon name="chevron-down" />}
    >
      Menu
    </Button>
  )}
/>
<Menu.Portal>
  <Menu.Positioner sideOffset={8} align="start">
    <Menu.Popup>
      <Menu.Item>Settings</Menu.Item>
      <Menu.Item>Invite new members</Menu.Item>
      <Menu.Item>Download app</Menu.Item>
      <Menu.Item>Log out</Menu.Item>
      <Menu.Root>
        <Menu.SubmenuTrigger>Submenu</Menu.SubmenuTrigger>
        <Menu.Portal>
          <Menu.Positioner>
            <Menu.Popup>
              <Menu.Item>Submenu Item 1</Menu.Item>
              <Menu.Item>Submenu Item 2</Menu.Item>
              <Menu.Item>Submenu Item 3</Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </Menu.Popup>
  </Menu.Positioner>
</Menu.Portal>