# Dropdown menu

The ⋯ row menu and every action menu: items with icons, a selected tick, disabled items that say why, a separator and a danger item last. On the phone it becomes an action sheet.

- **Group:** Overlays · **family:** `overlays` · **shadcn:** DropdownMenu
- **Build:** shadcn `DropdownMenu` (Radix).
- **In apps/admin today:** @radix-ui/react-dropdown-menu is installed and used directly (shell/account-menu, catalogue-more-menu); `dropdown-menu.tsx` wrapper is new.
- **Client component:** yes. 

## Content rules

- Verbs: "Edit", "Duplicate", "Copy handle", "Retire product".
- Danger item last, separated.

## Do

- Explain disabled items.

## Don't

- More than ~8 items; split or use a sheet.

## Motion

- Pop in: opacity, `translateY(--pop-shift -4px)` and scale .985 → 1 on `--motion-pop-in` (160ms); out 110ms. Origin top right (`.k-anchor`).

## Accessibility

- **Keyboard:** Enter / Space / ↓ open; ↑ ↓ move; Home / End; Enter activates; Escape closes and returns focus; type-ahead.
- **ARIA:** Radix DropdownMenu: `role="menu"`, `menuitem`, `menuitemcheckbox`; trigger `aria-haspopup` + `aria-expanded`.
- **Focus:** First item focused on keyboard open; trigger refocused on close.

## Tokens

`--popover` `--popover-foreground` `--border` `--r-card` `--e-pop` `--s-1` `--z-pop` `--s-2` `--text-micro` `--w-medium` `--muted-foreground` `--control-h-sm` `--r-control` `--text-body` `--font-voice` `--font-stretch-title` `--foreground` `--motion-hover` `--w-regular` `--text-small` `--font-ui` `--muted` `--accent` `--ring` `--accent-foreground` `--destructive` `--control-h-m` `--text-read`

## Files

`dropdown-menu.html` live specimen · `dropdown-menu.css` kit rules · `dropdown-menu.d.ts` props · full page: `docs/components/dropdown-menu/` (phone: `m/`).