> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Menu

> Present commands, checked options, radio choices, and nested menus.

Use `Menu` for actions opened from a trigger. Its items supply keyboard navigation and the visual layout of [ListItem](/ui/components/navigation/list-item).

## Action menu

```tsx theme={null}
import { IconCopy, IconTrash } from 'twenty-ui/icon';
import { Menu } from 'twenty-ui/surfaces';

type RecordMenuProps = { onDuplicate: () => void; onDelete: () => void };

export const RecordMenu = ({ onDuplicate, onDelete }: RecordMenuProps) => (
  <Menu.Root>
    <Menu.Trigger>Record actions</Menu.Trigger>
    <Menu.Popup>
      <Menu.Item startIcon={<IconCopy />} onClick={onDuplicate}>
        Duplicate
      </Menu.Item>
      <Menu.Separator />
      <Menu.Item startIcon={<IconTrash />} color="danger" onClick={onDelete}>
        Delete
      </Menu.Item>
    </Menu.Popup>
  </Menu.Root>
);
```

Action items close the menu when selected by default. `disabled` prevents selection. `hotkeys` displays shortcut hints; register shortcut handlers in your application.

## Selection and submenus

```tsx theme={null}
import { useState } from 'react';
import { Menu } from 'twenty-ui/surfaces';

export const ViewMenu = () => {
  const [showArchived, setShowArchived] = useState(false);
  const [view, setView] = useState('list');

  return (
    <Menu.Root>
      <Menu.Trigger>View options</Menu.Trigger>
      <Menu.Popup>
        <Menu.CheckboxItem
          checked={showArchived}
          onCheckedChange={setShowArchived}
        >
          Show archived records
        </Menu.CheckboxItem>
        <Menu.Separator />
        <Menu.SubmenuRoot>
          <Menu.SubmenuTrigger>Layout</Menu.SubmenuTrigger>
          <Menu.Popup>
            <Menu.RadioGroup value={view} onValueChange={setView}>
              <Menu.RadioItem value="list">List</Menu.RadioItem>
              <Menu.RadioItem value="board">Board</Menu.RadioItem>
            </Menu.RadioGroup>
          </Menu.Popup>
        </Menu.SubmenuRoot>
      </Menu.Popup>
    </Menu.Root>
  );
};
```

Checkbox and radio items keep the popup open by default so users can adjust options. Use `closeOnClick` to change that behavior. Nest a `SubmenuRoot`, `SubmenuTrigger`, and `Popup` inside a parent popup for submenus.

## Parts and interaction

| Part                            | Purpose                                      |
| ------------------------------- | -------------------------------------------- |
| `Root`, `Trigger`, `Popup`      | Own, open, and position the menu.            |
| `Item`                          | Runs an action.                              |
| `CheckboxItem`                  | Toggles an independent boolean option.       |
| `RadioGroup`, `RadioItem`       | Coordinate mutually exclusive options.       |
| `Group`, `GroupLabel`           | Label a group of related items.              |
| `Separator`                     | Separates groups.                            |
| `SubmenuRoot`, `SubmenuTrigger` | Coordinate a nested menu with its own popup. |

Arrow keys move through the items, including disabled ones, which receive focus but cannot be selected; typeahead finds items by their text. Enter or Space selects an item. Escape closes the menu and returns focus to its trigger. Use clear text labels even when items have icons.

`Popup` owns its portal and accepts placement props and a `container` override. Placement defaults depend on whether it is a top-level menu or a submenu:

| Popup          | `side`       | `align` | `sideOffset` | `alignOffset` |
| -------------- | ------------ | ------- | ------------ | ------------- |
| Top-level menu | `bottom`     | `start` | `8`          | `0`           |
| Submenu        | `inline-end` | `start` | `0`          | `-4`          |

It uses the [theme's portal container](/ui/theming) by default. Control open state with `Root.open` and `Root.onOpenChange`.

## Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.

### Menu.Root

<ParamField body="Root.actionsRef" type="RefObject<MenuRootActions | null>">
  A ref to imperative actions.

  * `unmount`: Manually unmounts the menu.
    Call this after any externally controlled closing animation finishes.
  * `close`: When specified, the menu can be closed imperatively.
</ParamField>

<ParamField body="Root.children" type="ReactNode | PayloadChildRenderFunction<Payload>">
  The content of the menu.
  This can be a regular React node or a render function that receives the `payload` of the active trigger.
</ParamField>

<ParamField body="Root.closeParentOnEsc" type="boolean" default="false">
  When in a submenu, determines whether pressing the Escape key
  closes the entire menu, or only the current child menu.
</ParamField>

<ParamField body="Root.defaultOpen" type="boolean" default="false">
  Whether the menu is initially open.

  To render a controlled menu, use the `open` prop instead.
</ParamField>

<ParamField body="Root.defaultTriggerId" type="string | null">
  ID of the trigger that the menu is associated with.
  This is useful in conjunction with the `defaultOpen` prop to create an initially open menu.
</ParamField>

<ParamField body="Root.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="Root.handle" type="MenuHandle<Payload>">
  A handle to associate the menu with a trigger.
  If specified, allows external triggers to control the menu's open state.
</ParamField>

<ParamField body="Root.highlightItemOnHover" type="boolean" default="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.
</ParamField>

<ParamField body="Root.loopFocus" type="boolean" default="true">
  Whether to loop keyboard focus back to the first item
  when the end of the list is reached while using the arrow keys.
</ParamField>

<ParamField body="Root.modal" type="boolean" default="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.

  On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

  Nested menus ignore this prop, and menus opened by hover are never modal.
</ParamField>

<ParamField body="Root.onOpenChange" type="((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)">
  Event handler called when the menu is opened or closed.
</ParamField>

<ParamField body="Root.onOpenChangeComplete" type="((open: boolean) => void)">
  Event handler called after any animations complete when the menu is opened or closed.
</ParamField>

<ParamField body="Root.open" type="boolean">
  Whether the menu is currently open.
</ParamField>

<ParamField body="Root.orientation" type="&#x22;horizontal&#x22; | &#x22;vertical&#x22;" default="vertical">
  The visual orientation of the menu.
  Controls whether roving focus uses up/down or left/right arrow keys.
</ParamField>

<ParamField body="Root.triggerId" type="string | null">
  ID of the trigger that the menu is associated with.
  This is useful in conjunction with the `open` prop to create a controlled menu.
  There's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set).
</ParamField>

### Menu.Trigger

<ParamField body="Trigger.className" type="string | ((state: MenuTriggerState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Trigger.closeDelay" type="number" default="0">
  How long to wait before closing the menu that was opened on hover.
  Specified in milliseconds.

  Requires the `openOnHover` prop.
</ParamField>

<ParamField body="Trigger.delay" type="number" default="100">
  How long to wait before the menu may be opened on hover. Specified in milliseconds.

  Requires the `openOnHover` prop.
</ParamField>

<ParamField body="Trigger.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="Trigger.handle" type="MenuHandle<Payload>">
  A handle to associate the trigger with a menu.
</ParamField>

<ParamField body="Trigger.nativeButton" type="boolean" default="true">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `false` if the rendered element is not a button (for example, `<div>`).
</ParamField>

<ParamField body="Trigger.openOnHover" type="boolean">
  Whether the menu should also open when the trigger is hovered.
</ParamField>

<ParamField body="Trigger.payload" type="Payload">
  A payload to pass to the menu when it is opened.
</ParamField>

<ParamField body="Trigger.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuTriggerState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="Trigger.style" type="CSSProperties | ((state: MenuTriggerState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Menu.Popup

<ParamField body="Popup.align" type="&#x22;center&#x22; | &#x22;start&#x22; | &#x22;end&#x22;">
  Alignment of the popup along the anchor. Defaults to `start`.
</ParamField>

<ParamField body="Popup.alignOffset" type="number">
  Offset in pixels along the alignment axis. Defaults to `0` for a menu and
  `-4` for a submenu.
</ParamField>

<ParamField body="Popup.anchor" type="Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null">
  Element or position the popup is anchored to. Defaults to the trigger.
</ParamField>

<ParamField body="Popup.className" type="string | ((state: MenuPopupState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Popup.container" type="HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null">
  Element the popup is portaled into. Defaults to the theme's portal
  container.
</ParamField>

<ParamField body="Popup.finalFocus" type="boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)">
  Determines the element to focus when the menu is closed.

  * `false`: Do not move focus.
  * `true`: Move focus based on the default behavior (trigger or previously focused element).
  * `RefObject`: Move focus to the ref element.
  * `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
</ParamField>

<ParamField body="Popup.keepMounted" type="boolean">
  Keeps the popup mounted in the DOM while the menu is closed.
</ParamField>

<ParamField body="Popup.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="Popup.side" type="&#x22;top&#x22; | &#x22;bottom&#x22; | &#x22;left&#x22; | &#x22;right&#x22; | &#x22;inline-end&#x22; | &#x22;inline-start&#x22;">
  Side of the anchor the popup is placed on. Defaults to `bottom` for a menu
  and `inline-end` for a submenu.
</ParamField>

<ParamField body="Popup.sideOffset" type="number">
  Distance in pixels between the anchor and the popup. Defaults to `8` for a
  menu and `0` for a submenu.
</ParamField>

<ParamField body="Popup.style" type="CSSProperties | ((state: MenuPopupState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Menu.Item

<ParamField body="Item.className" type="string | ((state: MenuItemState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Item.closeOnClick" type="boolean" default="true">
  Whether to close the menu when the item is clicked.
</ParamField>

<ParamField body="Item.color" type="&#x22;neutral&#x22; | &#x22;danger&#x22;">
  Color of the text and icons. `danger` marks a destructive action.
</ParamField>

<ParamField body="Item.description" type="ReactNode">
  Supporting text, placed according to `descriptionPlacement`.
</ParamField>

<ParamField body="Item.descriptionPlacement" type="&#x22;inline&#x22; | &#x22;end&#x22;">
  Where the description renders: inline after the content or at the end of
  the row.
</ParamField>

<ParamField body="Item.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="Item.endIcon" type="ReactNode">
  Icon rendered after the content.
</ParamField>

<ParamField body="Item.hotkeys" type="string[]">
  Keyboard shortcut keys displayed at the end of the row. Registering the
  shortcut is up to the application.
</ParamField>

<ParamField body="Item.label" type="string">
  Overrides the text label to use when the item is matched during keyboard text navigation.
</ParamField>

<ParamField body="Item.nativeButton" type="boolean" default="false">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `true` if the rendered element is a native button.
</ParamField>

<ParamField body="Item.onClick" type="((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)">
  The click handler for the menu item.
</ParamField>

<ParamField body="Item.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuItemState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="Item.startIcon" type="ReactNode">
  Icon rendered before the content.
</ParamField>

<ParamField body="Item.style" type="CSSProperties | ((state: MenuItemState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Menu.CheckboxItem

<ParamField body="CheckboxItem.checked" type="boolean">
  Whether the checkbox item is currently ticked.

  To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.
</ParamField>

<ParamField body="CheckboxItem.className" type="string | ((state: MenuCheckboxItemState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="CheckboxItem.closeOnClick" type="boolean" default="false">
  Whether to close the menu when the item is clicked.
</ParamField>

<ParamField body="CheckboxItem.color" type="&#x22;neutral&#x22; | &#x22;danger&#x22;">
  Color of the text and icons. `danger` marks a destructive action.
</ParamField>

<ParamField body="CheckboxItem.defaultChecked" type="boolean" default="false">
  Whether the checkbox item is initially ticked.

  To render a controlled checkbox item, use the `checked` prop instead.
</ParamField>

<ParamField body="CheckboxItem.description" type="ReactNode">
  Supporting text, placed according to `descriptionPlacement`.
</ParamField>

<ParamField body="CheckboxItem.descriptionPlacement" type="&#x22;inline&#x22; | &#x22;end&#x22;">
  Where the description renders: inline after the content or at the end of
  the row.
</ParamField>

<ParamField body="CheckboxItem.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="CheckboxItem.endIcon" type="ReactNode">
  Icon rendered after the content.
</ParamField>

<ParamField body="CheckboxItem.hotkeys" type="string[]">
  Keyboard shortcut keys displayed at the end of the row. Registering the
  shortcut is up to the application.
</ParamField>

<ParamField body="CheckboxItem.label" type="string">
  Overrides the text label to use when the item is matched during keyboard text navigation.
</ParamField>

<ParamField body="CheckboxItem.nativeButton" type="boolean" default="false">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `true` if the rendered element is a native button.
</ParamField>

<ParamField body="CheckboxItem.onCheckedChange" type="((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)">
  Event handler called when the checkbox item is ticked or unticked.
</ParamField>

<ParamField body="CheckboxItem.onClick" type="((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)">
  The click handler for the menu item.
</ParamField>

<ParamField body="CheckboxItem.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuCheckboxItemState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="CheckboxItem.startIcon" type="ReactNode">
  Icon rendered before the content.
</ParamField>

<ParamField body="CheckboxItem.style" type="CSSProperties | ((state: MenuCheckboxItemState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Menu.RadioGroup

<ParamField body="RadioGroup.children" type="ReactNode">
  The content of the component.
</ParamField>

<ParamField body="RadioGroup.className" type="string | ((state: MenuRadioGroupState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="RadioGroup.defaultValue" type="any">
  The uncontrolled value of the radio item that should be initially selected.

  To render a controlled radio group, use the `value` prop instead.
</ParamField>

<ParamField body="RadioGroup.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="RadioGroup.onValueChange" type="((value: any, eventDetails: MenuRootChangeEventDetails) => void)">
  Function called when the selected value changes.
</ParamField>

<ParamField body="RadioGroup.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioGroupState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="RadioGroup.style" type="CSSProperties | ((state: MenuRadioGroupState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="RadioGroup.value" type="any">
  The controlled value of the radio item that should be currently selected.

  To render an uncontrolled radio group, use the `defaultValue` prop instead.
</ParamField>

### Menu.RadioItem

<ParamField body="RadioItem.className" type="string | ((state: MenuRadioItemState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="RadioItem.closeOnClick" type="boolean" default="false">
  Whether to close the menu when the item is clicked.
</ParamField>

<ParamField body="RadioItem.color" type="&#x22;neutral&#x22; | &#x22;danger&#x22;">
  Color of the text and icons. `danger` marks a destructive action.
</ParamField>

<ParamField body="RadioItem.description" type="ReactNode">
  Supporting text, placed according to `descriptionPlacement`.
</ParamField>

<ParamField body="RadioItem.descriptionPlacement" type="&#x22;inline&#x22; | &#x22;end&#x22;">
  Where the description renders: inline after the content or at the end of
  the row.
</ParamField>

<ParamField body="RadioItem.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="RadioItem.endIcon" type="ReactNode">
  Icon rendered after the content.
</ParamField>

<ParamField body="RadioItem.hotkeys" type="string[]">
  Keyboard shortcut keys displayed at the end of the row. Registering the
  shortcut is up to the application.
</ParamField>

<ParamField body="RadioItem.label" type="string">
  Overrides the text label to use when the item is matched during keyboard text navigation.
</ParamField>

<ParamField body="RadioItem.nativeButton" type="boolean" default="false">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `true` if the rendered element is a native button.
</ParamField>

<ParamField body="RadioItem.onClick" type="((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)">
  The click handler for the menu item.
</ParamField>

<ParamField body="RadioItem.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioItemState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="RadioItem.startIcon" type="ReactNode">
  Icon rendered before the content.
</ParamField>

<ParamField body="RadioItem.style" type="CSSProperties | ((state: MenuRadioItemState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="RadioItem.value" type="any" required>
  Value of the radio item.
  This is the value that will be set in the MenuRadioGroup when the item is selected.
</ParamField>

### Menu.Group

<ParamField body="Group.children" type="ReactNode">
  The content of the component.
</ParamField>

<ParamField body="Group.className" type="string | ((state: MenuGroupState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Group.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="Group.style" type="CSSProperties | ((state: MenuGroupState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Menu.GroupLabel

<ParamField body="GroupLabel.className" type="string | ((state: MenuGroupLabelState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="GroupLabel.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupLabelState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="GroupLabel.style" type="CSSProperties | ((state: MenuGroupLabelState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Menu.Separator

<ParamField body="Separator.className" type="string | ((state: SeparatorState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Separator.orientation" type="&#x22;horizontal&#x22; | &#x22;vertical&#x22;" default="horizontal">
  The orientation of the separator.
</ParamField>

<ParamField body="Separator.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="Separator.style" type="CSSProperties | ((state: SeparatorState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Menu.SubmenuRoot

<ParamField body="SubmenuRoot.actionsRef" type="RefObject<MenuRootActions | null>">
  A ref to imperative actions.

  * `unmount`: Manually unmounts the menu.
    Call this after any externally controlled closing animation finishes.
  * `close`: When specified, the menu can be closed imperatively.
</ParamField>

<ParamField body="SubmenuRoot.children" type="ReactNode">
  The content of the submenu.
</ParamField>

<ParamField body="SubmenuRoot.closeParentOnEsc" type="boolean" default="false">
  When in a submenu, determines whether pressing the Escape key
  closes the entire menu, or only the current child menu.
</ParamField>

<ParamField body="SubmenuRoot.defaultOpen" type="boolean" default="false">
  Whether the menu is initially open.

  To render a controlled menu, use the `open` prop instead.
</ParamField>

<ParamField body="SubmenuRoot.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="SubmenuRoot.highlightItemOnHover" type="boolean" default="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.
</ParamField>

<ParamField body="SubmenuRoot.loopFocus" type="boolean" default="true">
  Whether to loop keyboard focus back to the first item
  when the end of the list is reached while using the arrow keys.
</ParamField>

<ParamField body="SubmenuRoot.onOpenChange" type="((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)">
  Event handler called when the menu is opened or closed.
</ParamField>

<ParamField body="SubmenuRoot.onOpenChangeComplete" type="((open: boolean) => void)">
  Event handler called after any animations complete when the menu is opened or closed.
</ParamField>

<ParamField body="SubmenuRoot.open" type="boolean">
  Whether the menu is currently open.
</ParamField>

<ParamField body="SubmenuRoot.orientation" type="&#x22;horizontal&#x22; | &#x22;vertical&#x22;" default="vertical">
  The visual orientation of the menu.
  Controls whether roving focus uses up/down or left/right arrow keys.
</ParamField>

### Menu.SubmenuTrigger

<ParamField body="SubmenuTrigger.className" type="string | ((state: MenuSubmenuTriggerState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="SubmenuTrigger.closeDelay" type="number" default="0">
  How long to wait before closing the menu that was opened on hover.
  Specified in milliseconds.

  Requires the `openOnHover` prop.
</ParamField>

<ParamField body="SubmenuTrigger.color" type="&#x22;neutral&#x22; | &#x22;danger&#x22;">
  Color of the text and icons. `danger` marks a destructive action.
</ParamField>

<ParamField body="SubmenuTrigger.delay" type="number" default="100">
  How long to wait before the menu may be opened on hover. Specified in milliseconds.

  Requires the `openOnHover` prop.
</ParamField>

<ParamField body="SubmenuTrigger.description" type="ReactNode">
  Supporting text, placed according to `descriptionPlacement`.
</ParamField>

<ParamField body="SubmenuTrigger.descriptionPlacement" type="&#x22;inline&#x22; | &#x22;end&#x22;">
  Where the description renders: inline after the content or at the end of
  the row.
</ParamField>

<ParamField body="SubmenuTrigger.disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="SubmenuTrigger.endIcon" type="ReactNode">
  Icon rendered after the content.
</ParamField>

<ParamField body="SubmenuTrigger.hotkeys" type="string[]">
  Keyboard shortcut keys displayed at the end of the row. Registering the
  shortcut is up to the application.
</ParamField>

<ParamField body="SubmenuTrigger.label" type="string">
  Overrides the text label to use when the item is matched during keyboard text navigation.
</ParamField>

<ParamField body="SubmenuTrigger.nativeButton" type="boolean" default="false">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `true` if the rendered element is a native button.
</ParamField>

<ParamField body="SubmenuTrigger.onClick" type="((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)" />

<ParamField body="SubmenuTrigger.openOnHover" type="boolean" default="true">
  Whether the menu should also open when the trigger is hovered.
</ParamField>

<ParamField body="SubmenuTrigger.render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="SubmenuTrigger.startIcon" type="ReactNode">
  Icon rendered before the content.
</ParamField>

<ParamField body="SubmenuTrigger.style" type="CSSProperties | ((state: MenuSubmenuTriggerState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>