# Context menu

A menu that opens where a person right-clicks (or long-presses, or presses the Menu key) on an area, in Candor's theme (Radix). Arrow keys move along the items, Right and Left open and close submenus, Escape closes the menu. A menu is never the only way to do something: the same actions belong somewhere a person can find without knowing to right-click. An item that can't be used stays in the menu, marked and explained.

- Registry name: `context-menu` (`@candor/context-menu`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/context-menu

## Install

```bash
npx candor-ui add context-menu
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/context-menu`.
It brings in: layer, motion, tokens, utils.
npm packages: @base-ui/react@^1.9.0, lucide-react@^1.67.0.

## Example

```tsx
"use client"

import * as React from "react"
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/candor/ui/context-menu"

export default function Example() {
  const [pinned, setPinned] = React.useState(false)
  return (
    <ContextMenu>
      {/* Focusable so the Menu key and Shift+F10 reach it; right-click or long-press also opens it. */}
      <ContextMenuTrigger tabIndex={0} className="flex h-32 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
        Right-click this report
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Open <ContextMenuShortcut>⏎</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuCheckboxItem checked={pinned} onCheckedChange={setPinned}>
          Pin to top
        </ContextMenuCheckboxItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Copy link</ContextMenuItem>
            <ContextMenuItem locked="Only owners can invite people.">Invite people</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Delete report</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

## <ContextMenu>

No props.

Also takes the props of `ContextMenuPrimitive.Root.Props`.

## <ContextMenuCheckboxItem>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.
- `onSelect?: OnSelect | undefined`: Called when the person chooses the item; `event.preventDefault()` keeps the menu open.
- `closeOnClick?: boolean | undefined` (default `true`): Closes the menu once the person ticks the item, as Candor's menus did on Radix. Defaults to true.

Also takes the props of `Omit<T, "className" | "style">`.

## <ContextMenuContent>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.

Also takes the props of `Omit<T, "className" | "style">`, `Pick<ContextMenuPrimitive.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding">`.

## <ContextMenuGroup>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.

Also takes the props of `Omit<T, "className" | "style">`.

## <ContextMenuItem>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.
- `inset?: boolean | undefined`: Indents the item to line up with items that have an icon.
- `variant?: "default" | "destructive" | undefined` (default `"default"`): destructive colours the item for actions that remove or can't be undone.
- `onSelect?: OnSelect | undefined`: Called when the person chooses the item; `event.preventDefault()` keeps the menu open.
- `locked?: string | undefined`: Why the item can't be used right now. When set, it stays in the menu and in the arrow-key order, marked `aria-disabled`, choosing it does nothing and keeps the menu open, and the reason is printed beside it and read to screen readers.

Also takes the props of `Omit<T, "className" | "style">`.

## <ContextMenuLabel>

Props:

- `inset?: boolean | undefined`: Indents the label to line up with items that have an icon.

Also takes the props of `React.ComponentProps<"div">`.

## <ContextMenuPortal>

No props.

Also takes the props of `Omit<ContextMenuPrimitive.Portal.Props, "container">`.

## <ContextMenuRadioGroup>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.

Also takes the props of `Omit<T, "className" | "style">`.

## <ContextMenuRadioItem>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.
- `onSelect?: OnSelect | undefined`: Called when the person chooses the item; `event.preventDefault()` keeps the menu open.
- `closeOnClick?: boolean | undefined` (default `true`): Closes the menu once the person ticks the item, as Candor's menus did on Radix. Defaults to true.

Also takes the props of `Omit<T, "className" | "style">`.

## <ContextMenuSeparator>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.

Also takes the props of `Omit<T, "className" | "style">`.

## <ContextMenuShortcut>

No props.

Also takes the props of `React.ComponentProps<"span">`.

## <ContextMenuSub>

No props.

Also takes the props of `ContextMenuPrimitive.SubmenuRoot.Props`.

## <ContextMenuSubContent>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.

Also takes the props of `Omit<T, "className" | "style">`, `Pick<ContextMenuPrimitive.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding">`.

## <ContextMenuSubTrigger>

Props:

- `className?: string | undefined`: Classes for the part, merged with Candor's.
- `style?: React.CSSProperties | undefined`: Inline styles for the part, merged over its motion chain.
- `inset?: boolean | undefined`: Indents the trigger to line up with items that have an icon.

Also takes the props of `Omit<T, "className" | "style">`.

## <ContextMenuTrigger>

Props:

- `className?: string | undefined`

Also takes the props of `Omit<ContextMenuPrimitive.Trigger.Props, "className">`.

## Motion

- **open** (overlay, scale): The menu fades in over the overlay family's duration (200 ms in, 120 ms out by default) and scales up from 0.95 from the point where it was opened (for a submenu, from the item that opened it).
- **sub-open** (overlay, scale): A submenu fades in and scales up a little from the item that opened it when the person opens it with the pointer or an arrow key, and fades out when it closes. Under reduced motion it is a short fade.

Set with `--cd-motion-context-menu-<moment>-*` in your brand file; the families are in the design reference.

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider`: its fixed strings in `strings`, its nouns in `nouns`; entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.