# DropdownMenu

> A menu of actions opened from a button.

- **Level**: molecule · **Status**: stable · **Role**: action
- **Import**: `import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel } from "@rrios-forge/ui/molecules/dropdown-menu";`
- **Source**: `packages/ui/src/molecules/dropdown-menu`

Keyboard-navigable action menu. Composes `@radix-ui/react-dropdown-menu` so the ARIA contract (`role="menu"`, roving focus, type-ahead, escape-to-close, focus return, portal isolation) is right by construction. Supports plain Items, CheckboxItems, RadioGroups, nested SubMenus, Labels, Separators and a trailing Shortcut hint.

## Use it for

- Tooltip / popover / contextual menu → `Tooltip` / `Popover` / `DropdownMenu`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `tone` | — | `neutral` | `neutral` | Which semantic colour family the element speaks in. |
| `intent` | — | `neutral` `danger` | `neutral` | What an action does. |

## Stories

- [Playground](/?path=/story/components-molecules-dropdownmenu--playground) · frame: `/iframe.html?id=components-molecules-dropdownmenu--playground&viewMode=story`
- [With checkboxes](/?path=/story/components-molecules-dropdownmenu--with-checkboxes) · frame: `/iframe.html?id=components-molecules-dropdownmenu--with-checkboxes&viewMode=story`
- [With radio group](/?path=/story/components-molecules-dropdownmenu--with-radio-group) · frame: `/iframe.html?id=components-molecules-dropdownmenu--with-radio-group&viewMode=story`
- [With submenu](/?path=/story/components-molecules-dropdownmenu--with-submenu) · frame: `/iframe.html?id=components-molecules-dropdownmenu--with-submenu&viewMode=story`
- [Account menu](/?path=/story/components-molecules-dropdownmenu--account-menu) · frame: `/iframe.html?id=components-molecules-dropdownmenu--account-menu&viewMode=story`
- [Keyboard flow (interaction test)](/?path=/story/components-molecules-dropdownmenu--keyboard-flow) — interaction test · frame: `/iframe.html?id=components-molecules-dropdownmenu--keyboard-flow&viewMode=story`

## Decisions that name it

- ADR-003 — Storybook editorial convention and pattern↔component bidirectionality
- ADR-005 — Visual operational rules: surfaces, interaction, motion
- ADR-006 — Geometry and typography signature
- ADR-007 — Material highlight on raised surfaces
- ADR-015 — Drawer molecule on top of Radix Dialog
- ADR-018 — Motion language as a Pattern Layer contract
- ADR-024 — `LocaleSelector` is a new molecule, not an extension of `Combobox`
- ADR-027 — Vibrant is the system's material, not one of its members
- ADR-030 — Axis vocabulary: one name, one meaning
- ADR-033 — The material ships once, and the night is tokens

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).