A list of actions in a dropdown, enhanced with keyboard navigation.
Groups all parts of the menu. Doesn't render its own HTML element.
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 |
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 |
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 |
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 |
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>
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>