{({ payload }) => (
{payload &&
itemGroups[payload].map((item, index) => (
{item.label}
))}
)}
);
}
function ArrowSvg(props: React.ComponentProps<'svg'>) {
return (
);
}
```
## API reference
### Root
Groups all parts of the menu.
Doesn’t render its own HTML element.
**Root Props:**
| Prop | Type | Default | Description |
| :--------------------------------------------------------------------- | :---------------------------------------------------------------------- | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen | `boolean` | `false` | Whether the menu is initially open.To render a controlled menu, use the `open` prop instead. |
| open | `boolean` | - | Whether the menu is currently open. |
| onOpenChange | `((open: boolean, eventDetails: Menu.Root.ChangeEventDetails) => void)` | - | Event handler called when the menu is opened or closed. |
| highlightItemOnHover | `boolean` | `true` | Whether moving the pointer over items should highlight them.
Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. |
| actionsRef | `RefObject` | - | A ref to imperative actions.\* `unmount`: When specified, the menu will not be unmounted when closed.
Instead, the `unmount` function must be called to unmount the menu manually.
Useful when the menu's animation is controlled by an external library. |
| \* `close`: When specified, the menu can be closed imperatively. |
| closeParentOnEsc | `boolean` | `false` | When in a submenu, determines whether pressing the Escape key
closes the entire menu, or only the current child menu. |
| defaultTriggerId | `string \| null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. |
| handle | `Menu.Handle` | - | A handle to associate the menu with a trigger.
If specified, allows external triggers to control the menu's open state. |
| 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.\* `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled. |
| \* `false`: user interaction with the rest of the document is allowed. |
| onOpenChangeComplete | `((open: boolean) => void)` | - | Event handler called after any animations complete when the menu is closed. |
| triggerId | `string \| null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `open` prop to create a controlled popover.
There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set). |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| orientation | `Menu.Root.Orientation` | `'vertical'` | The visual orientation of the menu.
Controls whether roving focus uses up/down or left/right arrow keys. |
| children | `ReactNode \| PayloadChildRenderFunction` | - | The content of the popover.
This can be a regular React node or a render function that receives the `payload` of the active trigger. |
### Trigger
A button that opens the menu.
Renders a `