Components

Context menu

A menu that appears at the pointer on right click or long press

import { ContextMenu } from "@nyte-ai/ui/context-menu";

A menu that opens where the user right clicks or long presses. No Nyte styling on this one, you own the visual layer.

Usage

Treat a context menu as an enhancement. Users may not discover it, especially on touch devices or with assistive technology, so expose the same actions from a visible control such as a Menu button.
ContextMenu.Trigger renders a <div>. It defines the area that responds to right click and long press.
The root popup is positioned at the pointer. Submenus are positioned against their trigger, and default to side="inline-end".
closeOnClick controls whether clicking an item closes the menu. It defaults to true on ContextMenu.Item and false on ContextMenu.CheckboxItem.
ContextMenu.LinkItem renders an <a>, so pass href instead of onClick.

Anatomy

<ContextMenu.Root>
  <ContextMenu.Trigger />
  <ContextMenu.Portal>
    <ContextMenu.Backdrop />
    <ContextMenu.Positioner>
      <ContextMenu.Popup>
        <ContextMenu.Arrow />
        <ContextMenu.Item />
        <ContextMenu.LinkItem />
        <ContextMenu.Separator />

        <ContextMenu.SubmenuRoot>
          <ContextMenu.SubmenuTrigger />
          {/* Portal › Positioner › Popup, as above */}
        </ContextMenu.SubmenuRoot>

        <ContextMenu.Group>
          <ContextMenu.GroupLabel />
        </ContextMenu.Group>

        <ContextMenu.RadioGroup>
          <ContextMenu.RadioItem>
            <ContextMenu.RadioItemIndicator />
          </ContextMenu.RadioItem>
        </ContextMenu.RadioGroup>

        <ContextMenu.CheckboxItem>
          <ContextMenu.CheckboxItemIndicator />
        </ContextMenu.CheckboxItem>
      </ContextMenu.Popup>
    </ContextMenu.Positioner>
  </ContextMenu.Portal>
</ContextMenu.Root>

Examples

Right click this area

<ContextMenu.Root>
  <ContextMenu.Trigger>Right click this area</ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Positioner>
      <ContextMenu.Popup>
        <ContextMenu.Item>Rename</ContextMenu.Item>
        <ContextMenu.Item>Duplicate</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>Delete</ContextMenu.Item>
      </ContextMenu.Popup>
    </ContextMenu.Positioner>
  </ContextMenu.Portal>
</ContextMenu.Root>

A submenu is a ContextMenu.SubmenuRoot nested in the parent popup, opened by ContextMenu.SubmenuTrigger.

<ContextMenu.SubmenuRoot>
  <ContextMenu.SubmenuTrigger>Move to</ContextMenu.SubmenuTrigger>
  <ContextMenu.Portal>
    <ContextMenu.Positioner>
      <ContextMenu.Popup>
        <ContextMenu.Item onClick={archive}>Archive</ContextMenu.Item>
      </ContextMenu.Popup>
    </ContextMenu.Positioner>
  </ContextMenu.Portal>
</ContextMenu.SubmenuRoot>

Props

The part tables below come from Base UI, MIT, © Material-UI SAS.

Root

A component that creates a context menu activated by right clicking or long pressing. 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: ContextMenu.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	`React.RefObject<MenuRoot.Actions \| 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.
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.
onOpenChangeComplete	`((open: boolean) => void)`	-	Event handler called after any animations complete when the menu is opened or closed.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
orientation	`MenuRoot.Orientation`	`'vertical'`	The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
children	`React.ReactNode`	-	-

Trigger

An area that opens the menu on right click or long press. Renders a <div> element.

Trigger Props:

Prop	Type	Default	Description
className	`string \| ((state: ContextMenu.Trigger.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Trigger.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Trigger.State) => ReactElement)`	-	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.

Trigger Data Attributes:

Attribute	Type	Description
data-popup-open	-	Present when the corresponding context menu is open.
data-pressed	-	Present when the corresponding context menu is open.

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Portal Props:

Prop	Type	Default	Description
container	`HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`	-	A parent element to render the portal element into.
className	`string \| ((state: ContextMenu.Portal.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Portal.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
keepMounted	`boolean`	`false`	Whether to keep the portal mounted in the DOM while the popup is hidden.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Portal.State) => ReactElement)`	-	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.

Backdrop

An overlay displayed beneath the menu popup. Renders a <div> element.

Backdrop Props:

Prop	Type	Default	Description
className	`string \| ((state: ContextMenu.Backdrop.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Backdrop.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Backdrop.State) => ReactElement)`	-	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.

Backdrop Data Attributes:

Attribute	Type	Description
data-open	-	Present when the menu is open.
data-closed	-	Present when the menu is closed.
data-starting-style	-	Present when the menu begins animating in.
data-ending-style	-	Present when the menu is animating out.

Positioner

Positions the context menu popup against the pointer or a custom anchor. Renders a <div> element.

Positioner Props:

Prop	Type	Default	Description
disableAnchorTracking	`boolean`	`false`	Whether to disable the popup from tracking any layout shift of its positioning anchor.
align	`Align`	`'start'`	How to align the popup relative to the specified side.
alignOffset	`number \| OffsetFunction`	-	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side. Defaults to `2` for root context menus when `side` is not specified and `align` is not `'center'`. Otherwise, it defaults to `0`.
side	`Side`	`'bottom'`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions. Submenus default to `'inline-end'`.
sideOffset	`number \| OffsetFunction`	-	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side. Defaults to `-5` for root context menus when `side` is not specified and `align` is not `'center'`. Otherwise, it defaults to `0`.
arrowPadding	`number`	-	Minimum distance to maintain between the arrow and the edges of the popup. Root context menus always use `0`. Submenus default to `5`.
anchor	`Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null`	-	An element to position the popup against. By default, root context menus are positioned at the pointer, and submenus are positioned against their trigger.
collisionAvoidance	`CollisionAvoidance`	-	Determines how to handle collisions when positioning the popup. `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`): `'flip'`: keep the requested side when it fits; otherwise try the opposite side (`top` and `bottom`, or `left` and `right`).`'shift'`: never change side; keep the requested side and move the popup within the clipping boundary so it stays visible.`'none'`: do not correct side-axis overflow. `align` controls overflow on the alignment axis (`start`/`center`/`end`): `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.`'shift'`: keep side and requested alignment, then nudge the popup along the alignment axis to fit.`'none'`: do not correct alignment-axis overflow. `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: `'start'`: allow perpendicular fallback and try the logical start side first (`top` before `bottom`, or `left` before `right` in LTR).`'end'`: allow perpendicular fallback and try the logical end side first (`bottom` before `top`, or `right` before `left` in LTR).`'none'`: do not fallback to the perpendicular axis. When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`.
collisionBoundary	`Boundary`	`'clipping-ancestors'`	An element or a rectangle that delimits the area that the popup is confined to.
collisionPadding	`Padding`	`5`	Additional space to maintain from the edge of the collision boundary.
sticky	`boolean`	`false`	Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.
className	`string \| ((state: ContextMenu.Positioner.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Positioner.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Positioner.State) => ReactElement)`	-	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.

alignOffset Prop Example:

<ContextMenu.Positioner
  alignOffset={({ side, anchor }) => {
    return side === 'top' || side === 'bottom' ? anchor.width : anchor.height;
  }}
/>

sideOffset Prop Example:

<ContextMenu.Positioner
  sideOffset={({ side, anchor }) => {
    return side === 'top' || side === 'bottom' ? anchor.height : anchor.width;
  }}
/>

collisionAvoidance Prop Example:

<Positioner
  collisionAvoidance={{
    side: 'shift',
    align: 'shift',
    fallbackAxisSide: 'none',
  }}
/>

Positioner Data Attributes:

Attribute	Type	Description
data-open	-	Present when the menu popup is open.
data-closed	-	Present when the menu popup is closed.
data-anchor-hidden	-	Present when the anchor is hidden.
data-align	`'start' \| 'center' \| 'end'`	Indicates how the popup is aligned relative to the specified side.
data-side	`'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'`	Indicates which side the popup is positioned relative to the anchor.

Positioner CSS Variables:

Variable	Type	Description
`--anchor-height`	`number`	The anchor's height.
`--anchor-width`	`number`	The anchor's width.
`--available-height`	`number`	The available height between the anchor and the edge of the viewport.
`--available-width`	`number`	The available width between the anchor and the edge of the viewport.
`--positioner-height`	`number`	The height of the menu's positioner. It is important to set `height` to this value when using CSS to animate size changes.
`--positioner-width`	`number`	The width of the menu's positioner. It is important to set `width` to this value when using CSS to animate size changes.
`--transform-origin`	`string`	The coordinates that this element is anchored to. Used for animations and transitions.

A container for the menu items. Renders a <div> element.

Popup Props:

Prop	Type	Default	Description
finalFocus	`boolean \| React.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.
children	`React.ReactNode`	-	-
className	`string \| ((state: ContextMenu.Popup.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Popup.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Popup.State) => ReactElement)`	-	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.

Popup Data Attributes:

Attribute	Type	Description
data-open	-	Present when the menu is open.
data-closed	-	Present when the menu is closed.
data-align	`'start' \| 'center' \| 'end'`	Indicates how the popup is aligned relative to specified side.
data-instant	`'click' \| 'dismiss' \| 'group' \| 'trigger-change'`	Present if animations should be instant.
data-side	`'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'`	Indicates which side the popup is positioned relative to the anchor.
data-starting-style	-	Present when the menu begins animating in.
data-ending-style	-	Present when the menu is animating out.

Arrow

Displays an element positioned against the menu anchor. Renders a <div> element.

Arrow Props:

Prop	Type	Default	Description
className	`string \| ((state: ContextMenu.Arrow.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Arrow.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Arrow.State) => ReactElement)`	-	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.

Arrow Data Attributes:

Attribute	Type	Description
data-open	-	Present when the menu popup is open.
data-closed	-	Present when the menu popup is closed.
data-uncentered	-	Present when the menu arrow is uncentered.
data-align	`'start' \| 'center' \| 'end'`	Indicates how the popup is aligned relative to specified side.
data-side	`'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'`	Indicates which side the popup is positioned relative to the anchor.

Item

An individual interactive item in the menu. Renders a <div> element.

Item Props:

Prop	Type	Default	Description
label	`string`	-	Overrides the text label to use when the item is matched during keyboard text navigation.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	-	The click handler for the menu item.
closeOnClick	`boolean`	`true`	Whether to close the menu when the item is clicked.
nativeButton	`boolean`	`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.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
className	`string \| ((state: ContextMenu.Item.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Item.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Item.State) => ReactElement)`	-	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.

Item Data Attributes:

Attribute	Type	Description
data-highlighted	-	Present when the menu item is highlighted.
data-disabled	-	Present when the menu item is disabled.

LinkItem

A link in the menu that can be used to navigate to a different page or section. Renders an <a> element.

LinkItem Props:

Prop	Type	Default	Description
label	`string`	-	Overrides the text label to use when the item is matched during keyboard text navigation.
closeOnClick	`boolean`	`false`	Whether to close the menu when the item is clicked.
className	`string \| ((state: ContextMenu.LinkItem.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.LinkItem.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, state: ContextMenu.LinkItem.State) => ReactElement)`	-	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.

LinkItem Data Attributes:

Attribute	Type	Description
data-highlighted	-	Present when the link is highlighted.

Separator

A separator element accessible to screen readers. Renders a <div> element.

Separator Props:

Prop	Type	Default	Description
orientation	`Orientation`	`'horizontal'`	The orientation of the separator.
className	`string \| ((state: SeparatorState) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: SeparatorState) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: SeparatorState) => ReactElement)`	-	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.

Group

Groups related menu items with the corresponding label. Renders a <div> element.

Group Props:

Prop	Type	Default	Description
children	`React.ReactNode`	-	The content of the component.
className	`string \| ((state: ContextMenu.Group.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.Group.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.Group.State) => ReactElement)`	-	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.

GroupLabel

An accessible label that is automatically associated with its parent group. Renders a <div> element.

GroupLabel Props:

Prop	Type	Default	Description
className	`string \| ((state: ContextMenu.GroupLabel.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.GroupLabel.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.GroupLabel.State) => ReactElement)`	-	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.

RadioGroup

Groups related radio items. Renders a <div> element.

RadioGroup Props:

Prop	Type	Default	Description
defaultValue	`any`	-	The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the `value` prop instead.
value	`any`	-	The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.
onValueChange	`((value: any, eventDetails: ContextMenu.RadioGroup.ChangeEventDetails) => void)`	-	Function called when the selected value changes.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
children	`React.ReactNode`	-	The content of the component.
className	`string \| ((state: ContextMenu.RadioGroup.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.RadioGroup.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.RadioGroup.State) => ReactElement)`	-	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.

RadioItem

A menu item that works like a radio button in a given group. Renders a <div> element.

RadioItem Props:

Prop	Type	Default	Description
label	`string`	-	Overrides the text label to use when the item is matched during keyboard text navigation.
value*	`any`	-	Value of the radio item. This is the value that will be set in the ContextMenu.RadioGroup when the item is selected.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	-	The click handler for the menu item.
closeOnClick	`boolean`	`false`	Whether to close the menu when the item is clicked.
nativeButton	`boolean`	`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.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
className	`string \| ((state: ContextMenu.RadioItem.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.RadioItem.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.RadioItem.State) => ReactElement)`	-	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.

RadioItem Data Attributes:

Attribute	Type	Description
data-checked	-	Present when the menu radio item is selected.
data-unchecked	-	Present when the menu radio item is not selected.
data-highlighted	-	Present when the menu radio item is highlighted.
data-disabled	-	Present when the menu radio item is disabled.

RadioItemIndicator

Indicates whether the radio item is selected. Renders a <span> element.

RadioItemIndicator Props:

Prop	Type	Default	Description
className	`string \| ((state: ContextMenu.RadioItemIndicator.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.RadioItemIndicator.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
keepMounted	`boolean`	`false`	Whether to keep the HTML element in the DOM when the radio item is inactive.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.RadioItemIndicator.State) => ReactElement)`	-	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.

RadioItemIndicator Data Attributes:

Attribute	Type	Description
data-checked	-	Present when the menu radio item is selected.
data-unchecked	-	Present when the menu radio item is not selected.
data-disabled	-	Present when the menu radio item is disabled.
data-starting-style	-	Present when the radio indicator begins animating in.
data-ending-style	-	Present when the radio indicator is animating out.

CheckboxItem

A menu item that toggles a setting on or off. Renders a <div> element.

CheckboxItem Props:

Prop	Type	Default	Description
label	`string`	-	Overrides the text label to use when the item is matched during keyboard text navigation.
defaultChecked	`boolean`	`false`	Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead.
checked	`boolean`	-	Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.
onCheckedChange	`((checked: boolean, eventDetails: ContextMenu.CheckboxItem.ChangeEventDetails) => void)`	-	Event handler called when the checkbox item is ticked or unticked.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	-	The click handler for the menu item.
closeOnClick	`boolean`	`false`	Whether to close the menu when the item is clicked.
nativeButton	`boolean`	`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.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
className	`string \| ((state: ContextMenu.CheckboxItem.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.CheckboxItem.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.CheckboxItem.State) => ReactElement)`	-	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.

CheckboxItem Data Attributes:

Attribute	Type	Description
data-checked	-	Present when the menu checkbox item is checked.
data-unchecked	-	Present when the menu checkbox item is not checked.
data-highlighted	-	Present when the menu checkbox item is highlighted.
data-disabled	-	Present when the menu checkbox item is disabled.

CheckboxItemIndicator

Indicates whether the checkbox item is ticked. Renders a <span> element.

CheckboxItemIndicator Props:

Prop	Type	Default	Description
className	`string \| ((state: ContextMenu.CheckboxItemIndicator.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.CheckboxItemIndicator.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
keepMounted	`boolean`	`false`	Whether to keep the HTML element in the DOM when the checkbox item is not checked.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.CheckboxItemIndicator.State) => ReactElement)`	-	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.

CheckboxItemIndicator Data Attributes:

Attribute	Type	Description
data-checked	-	Present when the menu checkbox item is checked.
data-unchecked	-	Present when the menu checkbox item is not checked.
data-disabled	-	Present when the menu checkbox item is disabled.
data-starting-style	-	Present when the indicator begins animating in.
data-ending-style	-	Present when the indicator is animating out.

SubmenuRoot

Groups all parts of a submenu. Doesn't render its own HTML element.

SubmenuRoot 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: ContextMenu.SubmenuRoot.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	`React.RefObject<MenuRoot.Actions \| 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.
closeParentOnEsc	`boolean`	`false`	When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
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.
onOpenChangeComplete	`((open: boolean) => void)`	-	Event handler called after any animations complete when the menu is opened or closed.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
orientation	`MenuRoot.Orientation`	`'vertical'`	The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
children	`React.ReactNode`	-	The content of the submenu.

SubmenuTrigger

A menu item that opens a submenu. Renders a <div> element.

SubmenuTrigger Props:

Prop	Type	Default	Description
label	`string`	-	Overrides the text label to use when the item is matched during keyboard text navigation.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	-	-
nativeButton	`boolean`	`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.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
openOnHover	`boolean`	`true`	Whether the menu should also open when the trigger is hovered.
delay	`number`	`100`	How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
closeDelay	`number`	`0`	How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
className	`string \| ((state: ContextMenu.SubmenuTrigger.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ContextMenu.SubmenuTrigger.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ContextMenu.SubmenuTrigger.State) => ReactElement)`	-	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.

SubmenuTrigger Data Attributes:

Attribute	Type	Description
data-popup-open	-	Present when the corresponding submenu is open.
data-highlighted	-	Present when the submenu trigger is highlighted.
data-disabled	-	Present when the submenu trigger is disabled.

Accessibility

Right click or long press inside the trigger opens the menu. Escape closes it.
Arrow keys move the highlight. orientation on the root switches between up and down and left and right. loopFocus wraps at the ends and defaults to true.
Typing matches item text. label on an item overrides the text that typeahead matches.
Arrow Right opens a submenu, Arrow Left closes it. Submenu triggers also open on hover.
Disabled items carry data-disabled and ignore pointer and keyboard input.
ContextMenu.GroupLabel is associated with its parent group. ContextMenu.Separator is exposed to screen readers.