# ContextMenu

> A menu surface that opens at a right-click's pointer position, composing Menu's popover styling and `role="menu"` wiring directly so its rows read and behave exactly like a standard menu's.

```ts
import { ContextMenu } from "@sdxc/ui";
```

Renders Menu unchanged; positioning against the pointer is handled
entirely by the `contextMenu()` mixin a consuming island applies to
ContextMenu.Trigger, while every nested row stays a real, tab-reachable `<a>` or `<button>`.

## Examples

```tsx
<ContextMenu.Trigger mix={[contextMenu("row-menu")]}>
	<TableRow />
</ContextMenu.Trigger>
<ContextMenu id="row-menu" aria-label={t("table.rowActions")}>
	<ContextMenu.Item href={viewUrl}>{t("actions.view")}</ContextMenu.Item>
	<ContextMenu.Item href={editUrl}>{t("actions.edit")}</ContextMenu.Item>
	<ContextMenu.Separator />
	<ContextMenu.Item danger commandfor="confirm-delete" command="show-modal">{t("actions.delete")}</ContextMenu.Item>
</ContextMenu>
```

## Props

Also accepts everything in `Menu.Props`.


### ContextMenu.Trigger

Renders ContextMenu.TriggerProps.children inside a plain `<div>`, the area a pointer gesture opens the paired ContextMenu against.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The content the pointer gesture opens ContextMenu against. |

Also accepts everything in `TagProps<"div">`.


### ContextMenu.Group

Renders ContextMenu.GroupProps.children as one labeled run of rows: Section restyled with a divider above every group but the first.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The group's rows, typically a ContextMenu.Label followed by a run of ContextMenu.Items. |

Also accepts everything in `Section.Props`.


### ContextMenu.Label

Renders ContextMenu.LabelProps.children as a ContextMenu.Group's small, muted heading, sized and spaced to sit directly above the group's first row for a dense row of actions.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The group's visible label text. |

Also accepts everything in `TagProps<"header">`.


### ContextMenu.SubTrigger

Renders a row that opens a nested ContextMenu.SubContent surface: Menu.Item restyled with inline-end padding for a trailing chevron icon; point `commandfor` at the nested surface's `id` with `command="toggle-popover"`.

Takes no props of its own.

### ContextMenu.SubContent

Renders a nested surface opened by a ContextMenu.SubTrigger row: ContextMenu itself, defaulting `placement` to DEFAULT_SUB_PLACEMENT since a nested row conventionally opens beside itself.

Also accepts everything in `Props`.


### ContextMenu.Shortcut

Renders ContextMenu.ShortcutProps.children as a row's trailing keyboard-shortcut hint: pushed to the row's inline end, muted, and set in tabular digits so the hints of a column of rows line up.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The shortcut hint text, typically a key combination like "⌘⇧D". |

Also accepts everything in `TagProps<"span">`.