Prop	Type	Default	Responsive
defaultOpen	boolean	false	No
open	boolean	-	No
onOpenChange	(open, event) => void	-	No
closeParentOnEsc	boolean	true	No
modal	boolean	true	No
onOpenChangeComplete	(open) => void	-	No
disabled	boolean	false	No
openOnHover	boolean	-	No
delay	number	100	No
loop	boolean	true	No
orientation	horizontalvertical	vertical	No
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} />} />

Prop	Type	Default	Responsive
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.

Prop	Type	Default	Responsive
align	startcenterend	center	No
alignOffset	number(data) => number	0	No
side	bottominline-endinline-startleftrighttop	bottom	No
sideOffset	number(data) => number	0	No
arrowPadding	number	5	No
anchor	React.RefElementVirtualElement(() => Element \| VirtualElement \| null)null	-	No
collisionBoundary	clipping-ancestorsElementElement[]Rect	clipping-ancestors	No
collisionPadding	numberRect	5	No
sticky	boolean	false	No
positionMethod	absolutefixed	absolute	No
trackAnchor	boolean	true	No
className	string	-	No
style	CSSProperties	-	No

Menu.Item

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

Prop	Type	Default	Responsive
label	string	-	No
onClick	(event) => void	-	No
closeOnClick	boolean	true	No
disabled	boolean	false	No
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>

Menu