Overlay
Dropdown Menu
Contextual action menu with keyboard navigation, shortcuts, checkboxes, and radio groups.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/dropdown-menu
Examples
Checkbox items
A column-toggle menu — checkbox items drive state, with a live count below.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup,
} from "@codefast/ui/dropdown-menu";
<DropdownMenu>
<DropdownMenuTrigger asChild>…</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>…</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
API reference
Props for each part of the component. All native element props are also forwarded.
DropdownMenuCheckboxItem
A menu item with a checkmark you control.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / onCheckedChange | boolean / (checked: boolean) => void | — | Controlled checked state and its handler. |
DropdownMenuRadioGroup / RadioItem
Single-choice section inside the menu.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | string / (value: string) => void | — | On the group: the chosen RadioItem value. |
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
| align / side | "start"|"center"|"end" / "top"|"bottom"… | "center" / "bottom" | Placement relative to the trigger. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Space | Opens the menu from the trigger. |
| Arrow+Down | Moves to the next item. |
| Arrow+Up | Moves to the previous item. |
| Enter | Activates the focused item. |
| Esc | Closes the menu and restores focus. |
- Implements the ARIA menu pattern with type-ahead and roving focus.
- Checkbox and radio items expose aria-checked so their state is announced.
- Use a Select (listbox) when the goal is choosing a form value, not running an action.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Group related actions and label the groups.
- Use checkbox items for toggles and a radio group for one-of-many.
Don’t
- Don’t nest more than one level of submenus.
- Don’t put primary page actions only in a dropdown.