A dropdown menu of actions, opened from a button.
children | ReactNode | PayloadChildRenderFunction<Payload> | – | The content of the menu. This can be a regular React node or a render function that receives the |
closeParentOnEsc | boolean | false | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. |
defaultOpen | boolean | false | Whether the menu is initially open. To render a controlled menu, use the |
defaultTriggerId | string|null | – | ID of the trigger that the menu is associated with. This is useful in conjunction with the |
disabled | boolean | false | Whether the component should ignore user interaction. |
handle | MenuHandle<Payload> | – | A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu's open state. |
highlightItemOnHover | boolean | true | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS |
loopFocus | boolean | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
modal | boolean | true | Determines if the menu enters a modal state when open.
On touch devices, a Nested menus ignore this prop, and menus opened by hover are never modal. |
onItemHighlighted | ((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void) | – | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item element (or
|
onOpenChange | ((open: boolean, eventDetails: MenuRootChangeEventDetails) => void) | – | Event handler called when the menu is opened or closed. |
onOpenChangeComplete | ((open: boolean) => void) | – | Event handler called after any animations complete when the menu is opened or closed. |
open | boolean | – | Whether the menu is currently open. |
orientation | "horizontal"|"vertical" | 'vertical' | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. |
triggerId | string|null | – | ID of the trigger that the menu is associated with. This is useful in conjunction with the |
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts render, plus every native <kbd> attribute.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
MenuCreateHandle is called, not rendered. It creates a handle: pass it as handle to a trigger and to the root, and the trigger can sit anywhere in the tree, outside the root.