Menu
Props
API reference for Menu. For usage examples, see the React tab.
Menu.Root
| Name | Type | Default |
|---|---|---|
| children (required) | ReactNode | |
| defaultOpen | boolean | |
Whether the overlay is open by default (uncontrolled). | ||
| isOpen | boolean | |
Whether the overlay is open by default (controlled). | ||
Menu.Container
| Name | Type | Default |
|---|---|---|
| children | ((item: T) => ReactNode) | ReactNode | |
The contents of the collection. | ||
| escapeKeyBehavior | "clearSelection" | "none" | 'clearSelection' |
Whether pressing the escape key should clear selection in the menu or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. | ||
| items | Iterable<T> | |
Item objects in the collection. | ||
| renderEmptyState | (() => ReactNode) | |
Provides content to display when there are no items in the menu. | ||
| shouldCloseOnSelect | boolean | |
Whether the menu should close when the menu item is selected. | ||
| shouldFocusWrap | boolean | |
Whether keyboard navigation is circular. | ||
Menu.Divider
| Name | Type | Default |
|---|---|---|
| elementType | string | |
The HTML element type that will be used to render the separator. | ||
| orientation | Orientation | 'horizontal' |
The orientation of the separator. | ||
| variant | "subtle" | subtle |
Lighter border treatment. Omit for the default bold divider. | ||
Menu.Header
| Name | Type | Default |
|---|---|---|
| children (required) | ReactNode | |
The content of the menu section header. | ||
Menu.Item
| Name | Type | Default |
|---|---|---|
| children | ((string | number | bigint | boolean | Iterable<ReactNode> | Promise<AwaitedReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | ReactPortal | ((values: MenuItemRenderProps & { ...; }) => ReactNode)) & (string | ... 6 more ... | ReactPortal)) | null | |
The children of the component. A function may be provided to alter the children based on component state. | ||
| download | string | boolean | |
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN (opens in new tab). | ||
| href | string | |
A URL to link to. See MDN (opens in new tab). | ||
| hrefLang | string | |
Hints at the human language of the linked URL. SeeMDN (opens in new tab). | ||
| isDisabled | boolean | |
Whether the item is disabled. | ||
| ping | string | |
A space-separated list of URLs to ping when the link is followed. See MDN (opens in new tab). | ||
| referrerPolicy | HTMLAttributeReferrerPolicy | |
How much of the referrer to send when following the link. See MDN (opens in new tab). | ||
| rel | string | |
The relationship between the linked resource and the current page. See MDN (opens in new tab). | ||
| routerOptions | undefined | |
Options for the configured client side router. | ||
| shouldCloseOnSelect | boolean | |
Whether the menu should close when the menu item is selected. | ||
| target | HTMLAttributeAnchorTarget | |
The target window for the link. See MDN (opens in new tab). | ||
| textValue | string | |
A string representation of the item's contents, used for features like typeahead. | ||
Menu.Popover
| Name | Type | Default |
|---|---|---|
| children (required) | ReactNode | |
The content rendered inside the popover. | ||
| crossOffset | number | 0 |
The additional offset applied along the cross axis between the element and its anchor element. | ||
| defaultOpen | boolean | |
Whether the overlay is open by default (uncontrolled). | ||
| getTargetRect | ((target: Element) => DOMRect | null) | target.getBoundingClientRect() |
Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection. | ||
| isEntering | boolean | |
Whether the popover is currently performing an entry animation. | ||
| isExiting | boolean | |
Whether the popover is currently performing an exit animation. | ||
| isKeyboardDismissDisabled | boolean | false |
Whether pressing the escape key to close the popover should be disabled. Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided. | ||
| isOpen | boolean | |
Whether the overlay is open by default (controlled). | ||
| maxHeight | number | |
The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height. | ||
| offset | number | 8 |
The additional offset applied along the main axis between the element and its anchor element. | ||
| placement | Placements | |
The placement of the element with respect to its anchor element. | ||
| shouldFlip | boolean | true |
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. | ||
| shouldSkipAnimation | boolean | |
Whether the popover should appear and disappear without an entry or exit animation. This is used by components such as PreviewTrigger to skip animations when quickly swapping between overlays. | ||
Menu.Section
| Name | Type | Default |
|---|---|---|
| children | ((item: T) => ReactElement<unknown, string | JSXElementConstructor<any>>) | ReactNode | |
Static child items or a function to render children. | ||
| items | Iterable<T> | |
Item objects in the section. | ||
| shouldCloseOnSelect | boolean | |
Whether the menu should close when the menu item is selected. | ||
Menu.Submenu
| Name | Type | Default |
|---|---|---|
| children (required) | ReactElement<unknown, string | JSXElementConstructor<any>>[] | |
The contents of the SubmenuTrigger. The first child should be an Item (the trigger) and the second child should be the Popover (for the submenu). | ||