A list of actions in a dropdown, enhanced with keyboard navigation.
Base UI
This component is using Base UI under the hood. While most of the original props are available, we have made some changes to the API to fit our needs.
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>