# Dropdown menu

shadcn's dropdown menu (Radix) in Candor's theme.

- Registry name: `dropdown-menu` (`@candor/dropdown-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/dropdown-menu

## Install

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

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/dropdown-menu`.
It brings in: render-prop, utils.
npm packages: lucide-react@^1.67.0, radix-ui@^1.8.1.

## Example

```tsx
"use client"

import { MoreHorizontal, Pencil, Pin, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" aria-label="Thread actions">
          <MoreHorizontal />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuLabel>Clean up stale flags</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Pencil /> Rename
          <DropdownMenuShortcut>R</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Pin /> Pin
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <Trash2 /> Delete thread
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## <DropdownMenu>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Root>`.

## <DropdownMenuPortal>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Portal>`.

## <DropdownMenuTrigger>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>`, `RenderProp`.

## <DropdownMenuContent>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Content>`.

## <DropdownMenuGroup>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Group>`.

## <DropdownMenuLabel>

Props:

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

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Label>`.

## <DropdownMenuItem>

Props:

- `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.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Item>`.

## <DropdownMenuCheckboxItem>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>`.

## <DropdownMenuRadioGroup>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>`.

## <DropdownMenuRadioItem>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>`.

## <DropdownMenuSeparator>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Separator>`.

## <DropdownMenuShortcut>

No props.

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

## <DropdownMenuSub>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.Sub>`.

## <DropdownMenuSubTrigger>

Props:

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

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>`.

## <DropdownMenuSubContent>

No props.

Also takes the props of `React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>`.

## 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` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.