# Context Menu

A menu that opens on right click or long press.

Source: [context-menu.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/context-menu.tsx)

```tsx
import { CopyIcon, FolderIcon, ScissorsIcon, Trash2Icon } from "lucide-react";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function ContextMenuBasic() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-sm flex-col items-center justify-center gap-1 rounded-md border border-dashed border-border-strong text-center text-sm text-muted-foreground">
        <span>Right-click here</span>
        <span className="text-xs text-faint">or long-press on touch devices</span>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuItem>
          <FolderIcon />
          Open
          <ContextMenuShortcut>⌘O</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <ScissorsIcon />
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <CopyIcon />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash2Icon />
          Move to trash
          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/context-menu
```

## Usage

```tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function FileContextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="rounded-md border p-6">homepage-v2.fig</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Open
          <ContextMenuShortcut>⌘O</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>Rename</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Move to trash</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

`ContextMenuTrigger` wraps the area that opens the menu. Items work like those in a
[Dropdown Menu](https://ui.jarv.is/components/dropdown-menu.md).

People won't always think to right-click, so make these actions available somewhere else too.

## Composition

- `ContextMenu`
  - `ContextMenuTrigger`
  - `ContextMenuContent`
    - `ContextMenuItem`
      - `ContextMenuShortcut`
    - `ContextMenuGroup`
      - `ContextMenuLabel`
    - `ContextMenuSeparator`
    - `ContextMenuCheckboxItem`
    - `ContextMenuRadioGroup`
      - `ContextMenuRadioItem`
    - `ContextMenuSub`
      - `ContextMenuSubTrigger`
      - `ContextMenuSubContent`

## Examples

### Submenus

Nest a menu with `ContextMenuSub`, `ContextMenuSubTrigger` and `ContextMenuSubContent`.

```tsx
import { FileTextIcon, FolderIcon, ImageIcon, PlusIcon } from "lucide-react";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function ContextMenuSubmenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-sm items-center justify-center rounded-md border border-dashed border-border-strong text-sm text-muted-foreground">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <PlusIcon />
            New
          </ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-44">
            <ContextMenuItem>
              <FolderIcon />
              Folder
            </ContextMenuItem>
            <ContextMenuItem>
              <FileTextIcon />
              Document
            </ContextMenuItem>
            <ContextMenuItem>
              <ImageIcon />
              Image
            </ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuItem>Refresh</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

### Checkbox and radio items

Use `ContextMenuCheckboxItem` for toggles, and `ContextMenuRadioItem`s inside a
`ContextMenuRadioGroup` to pick one of several options.

```tsx
import * as React from "react";

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function ContextMenuCheckboxAndRadioItems() {
  const [showHidden, setShowHidden] = React.useState(false);
  const [showPreview, setShowPreview] = React.useState(true);
  const [sort, setSort] = React.useState("name");
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-sm items-center justify-center rounded-md border border-dashed border-border-strong text-sm text-muted-foreground">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuCheckboxItem checked={showHidden} onCheckedChange={setShowHidden}>
          Show hidden files
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={showPreview} onCheckedChange={setShowPreview}>
          Show preview
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuLabel>Sort by</ContextMenuLabel>
          <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
            <ContextMenuRadioItem value="name">Name</ContextMenuRadioItem>
            <ContextMenuRadioItem value="modified">Date modified</ContextMenuRadioItem>
            <ContextMenuRadioItem value="size">Size</ContextMenuRadioItem>
          </ContextMenuRadioGroup>
        </ContextMenuGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

## Props

Items, labels and submenu triggers take `inset` to line up with items that have an icon.

| Part | Extends |
| --- | --- |
| `ContextMenu` | [`ContextMenu.Root`](https://base-ui.com/react/components/context-menu#root) |
| `ContextMenuPortal` | [`ContextMenu.Portal`](https://base-ui.com/react/components/context-menu#portal) |
| `ContextMenuTrigger` | [`ContextMenu.Trigger`](https://base-ui.com/react/components/context-menu#trigger) |
| `ContextMenuContent` | [`ContextMenu.Popup`](https://base-ui.com/react/components/context-menu#popup) |
| `ContextMenuGroup` | [`ContextMenu.Group`](https://base-ui.com/react/components/context-menu#group) |
| `ContextMenuLabel` | [`ContextMenu.GroupLabel`](https://base-ui.com/react/components/context-menu#grouplabel) |
| `ContextMenuItem` | [`ContextMenu.Item`](https://base-ui.com/react/components/context-menu#item) |
| `ContextMenuSub` | [`ContextMenu.SubmenuRoot`](https://base-ui.com/react/components/context-menu#submenuroot) |
| `ContextMenuSubTrigger` | [`ContextMenu.SubmenuTrigger`](https://base-ui.com/react/components/context-menu#submenutrigger) |
| `ContextMenuSubContent` | `ContextMenuContent` |
| `ContextMenuCheckboxItem` | [`ContextMenu.CheckboxItem`](https://base-ui.com/react/components/context-menu#checkboxitem) |
| `ContextMenuRadioGroup` | [`ContextMenu.RadioGroup`](https://base-ui.com/react/components/context-menu#radiogroup) |
| `ContextMenuRadioItem` | [`ContextMenu.RadioItem`](https://base-ui.com/react/components/context-menu#radioitem) |
| `ContextMenuSeparator` | [`ContextMenu.Separator`](https://base-ui.com/react/components/context-menu#separator) |
| `ContextMenuShortcut` | `<span>` |

The tables leave out `className`, `style` and `render`. Parts built on Base UI take them as its [styling](https://base-ui.com/react/handbook/styling) and [composition](https://base-ui.com/react/handbook/composition) guides describe.

### ContextMenu

| Prop                    | Type                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onOpenChange?`         | `((open: boolean, eventDetails: ContextMenu.Root.ChangeEventDetails) => void)`                        | Event handler called when the menu is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `closeParentOnEsc?`     | `boolean`                                                                                             | **Deprecated.**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `children?`             | `React.ReactNode`                                                                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `defaultOpen?`          | `boolean`                                                                                             | Whether the menu is initially open. To render a controlled menu, use the `open` prop instead. Default: `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `loopFocus?`            | `boolean`                                                                                             | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Default: `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `highlightItemOnHover?` | `boolean`                                                                                             | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. Default: `true`                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `onOpenChangeComplete?` | `((open: boolean) => void)`                                                                           | Event handler called after any animations complete when the menu is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `onItemHighlighted?`    | `((highlightedItem: HTMLElement \| undefined, eventDetails: MenuRoot.HighlightEventDetails) => void)` | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item element (or `undefined` if no item is highlighted) and details containing the reason for the change, the event, and the item's text label. The `reason` can be: - `'keyboard'`: the highlight changed due to keyboard navigation. - `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent` rather than a `PointerEvent`. - `'none'`: the highlight changed for another reason, such as automatic highlighting while filtering, the item list changing, or the popup opening or closing. |
| `open?`                 | `boolean`                                                                                             | Whether the menu is currently open.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `orientation?`          | `"horizontal" \| "vertical"`                                                                          | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. Default: `'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `disabled?`             | `boolean`                                                                                             | Whether the component should ignore user interaction. Default: `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `actionsRef?`           | `React.RefObject<MenuRootActions \| null>`                                                            | A ref to imperative actions. - `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. - `close`: Closes the menu imperatively when called.                                                                                                                                                                                                                                              |

### ContextMenuPortal

| Prop           | Type                                                                                      | Description                                                                               |
| -------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `keepMounted?` | `boolean`                                                                                 | Whether to keep the portal mounted in the DOM while the popup is hidden. Default: `false` |
| `container?`   | `HTMLElement \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| ShadowRoot \| null` | A parent element to render the portal element into.                                       |

### ContextMenuContent

| Prop           | Type                                                                                                                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children?`    | `React.ReactNode`                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `id?`          | `string`                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `finalFocus?`  | `boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void)` | 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.                                                                                                                                                                                                                                                                                                                                                                      |
| `side?`        | `"bottom" \| "inline-end" \| "inline-start" \| "left" \| "right" \| "top"`                                                    | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. Submenus default to `'inline-end'`. Default: `"right"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `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`. Default: `0` |
| `align?`       | `"center" \| "end" \| "start"`                                                                                                | How to align the popup relative to the specified side. Default: `"start"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `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`. Default: `4`   |

### ContextMenuGroup

| Prop        | Type              | Description                   |
| ----------- | ----------------- | ----------------------------- |
| `children?` | `React.ReactNode` | The content of the component. |

### ContextMenuLabel

| Prop     | Type      | Description |
| -------- | --------- | ----------- |
| `inset?` | `boolean` |             |

### ContextMenuItem

| Prop            | Type                                                                           | Description                                                                                                                                                                   |
| --------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onClick?`      | `((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)` | The click handler for the menu item.                                                                                                                                          |
| `disabled?`     | `boolean`                                                                      | Whether the component should ignore user interaction. Default: `false`                                                                                                        |
| `label?`        | `string`                                                                       | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.                                                        |
| `id?`           | `string`                                                                       |                                                                                                                                                                               |
| `closeOnClick?` | `boolean`                                                                      | Whether to close the menu when the item is clicked. Default: `true`                                                                                                           |
| `nativeButton?` | `boolean`                                                                      | 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. Default: `false` |
| `inset?`        | `boolean`                                                                      |                                                                                                                                                                               |
| `variant?`      | `"default" \| "destructive"`                                                   | Default: `"default"`                                                                                                                                                          |

### ContextMenuSub

| Prop                    | Type                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onOpenChange?`         | `((open: boolean, eventDetails: ContextMenu.SubmenuRoot.ChangeEventDetails) => void)`                 | Event handler called when the menu is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `closeParentOnEsc?`     | `boolean`                                                                                             | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. Default: `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `children?`             | `React.ReactNode`                                                                                     | The content of the submenu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `defaultOpen?`          | `boolean`                                                                                             | Whether the menu is initially open. To render a controlled menu, use the `open` prop instead. Default: `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `loopFocus?`            | `boolean`                                                                                             | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Default: `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `highlightItemOnHover?` | `boolean`                                                                                             | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. Default: `true`                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `onOpenChangeComplete?` | `((open: boolean) => void)`                                                                           | Event handler called after any animations complete when the menu is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `onItemHighlighted?`    | `((highlightedItem: HTMLElement \| undefined, eventDetails: MenuRoot.HighlightEventDetails) => void)` | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item element (or `undefined` if no item is highlighted) and details containing the reason for the change, the event, and the item's text label. The `reason` can be: - `'keyboard'`: the highlight changed due to keyboard navigation. - `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent` rather than a `PointerEvent`. - `'none'`: the highlight changed for another reason, such as automatic highlighting while filtering, the item list changing, or the popup opening or closing. |
| `open?`                 | `boolean`                                                                                             | Whether the menu is currently open.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `orientation?`          | `"horizontal" \| "vertical"`                                                                          | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. Default: `'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `disabled?`             | `boolean`                                                                                             | Whether the component should ignore user interaction. Default: `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `actionsRef?`           | `React.RefObject<MenuRootActions \| null>`                                                            | A ref to imperative actions. - `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. - `close`: Closes the menu imperatively when called.                                                                                                                                                                                                                                              |

### ContextMenuSubTrigger

| Prop            | Type                                                                           | Description                                                                                                                                                                   |
| --------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onClick?`      | `((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)` |                                                                                                                                                                               |
| `label?`        | `string`                                                                       | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.                                                        |
| `id?`           | `string`                                                                       |                                                                                                                                                                               |
| `disabled?`     | `boolean`                                                                      | Whether the component should ignore user interaction. Default: `false`                                                                                                        |
| `delay?`        | `number`                                                                       | How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. Default: `100`                                           |
| `closeDelay?`   | `number`                                                                       | How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. Default: `0`                                   |
| `openOnHover?`  | `boolean`                                                                      | Whether the menu should also open when the trigger is hovered. Default: `true`                                                                                                |
| `nativeButton?` | `boolean`                                                                      | 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. Default: `false` |
| `inset?`        | `boolean`                                                                      |                                                                                                                                                                               |

### ContextMenuSubContent

| Prop           | Type                                                                                                                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children?`    | `React.ReactNode`                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `id?`          | `string`                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `finalFocus?`  | `boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void)` | 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.                                                                                                                                                                                                                                                                                                                                                                      |
| `side?`        | `"bottom" \| "inline-end" \| "inline-start" \| "left" \| "right" \| "top"`                                                    | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. Submenus default to `'inline-end'`. Default: `"right"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `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`. Default: `2` |
| `align?`       | `"center" \| "end" \| "start"`                                                                                                | How to align the popup relative to the specified side. Default: `"start"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `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`. Default: `-2`  |

### ContextMenuCheckboxItem

| Prop               | Type                                                                                      | Description                                                                                                                                                                   |
| ------------------ | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `checked?`         | `boolean`                                                                                 | Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.                                                |
| `defaultChecked?`  | `boolean`                                                                                 | Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead. Default: `false`                                         |
| `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.                                                                                                                                          |
| `disabled?`        | `boolean`                                                                                 | Whether the component should ignore user interaction. Default: `false`                                                                                                        |
| `label?`           | `string`                                                                                  | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.                                                        |
| `id?`              | `string`                                                                                  |                                                                                                                                                                               |
| `closeOnClick?`    | `boolean`                                                                                 | Whether to close the menu when the item is clicked. Default: `false`                                                                                                          |
| `nativeButton?`    | `boolean`                                                                                 | 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. Default: `false` |
| `inset?`           | `boolean`                                                                                 |                                                                                                                                                                               |

### ContextMenuRadioGroup

| Prop             | Type                                                                              | Description                                                                                                                                           |
| ---------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children?`      | `React.ReactNode`                                                                 | The content of the component.                                                                                                                         |
| `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. |
| `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.         |
| `onValueChange?` | `((value: any, eventDetails: ContextMenu.RadioGroup.ChangeEventDetails) => void)` | Function called when the selected value changes.                                                                                                      |
| `disabled?`      | `boolean`                                                                         | Whether the component should ignore user interaction. Default: `false`                                                                                |

### ContextMenuRadioItem

| Prop            | Type                                                                           | Description                                                                                                                                                                   |
| --------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`         | `any`                                                                          | Value of the radio item. This is the value that will be set in the MenuRadioGroup when the item is selected.                                                                  |
| `onClick?`      | `((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)` | The click handler for the menu item.                                                                                                                                          |
| `disabled?`     | `boolean`                                                                      | Whether the component should ignore user interaction. Default: `false`                                                                                                        |
| `label?`        | `string`                                                                       | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.                                                        |
| `id?`           | `string`                                                                       |                                                                                                                                                                               |
| `closeOnClick?` | `boolean`                                                                      | Whether to close the menu when the item is clicked. Default: `false`                                                                                                          |
| `nativeButton?` | `boolean`                                                                      | 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. Default: `false` |
| `inset?`        | `boolean`                                                                      |                                                                                                                                                                               |

### ContextMenuSeparator

| Prop           | Type                         | Description                                               |
| -------------- | ---------------------------- | --------------------------------------------------------- |
| `orientation?` | `"horizontal" \| "vertical"` | The orientation of the separator. Default: `'horizontal'` |