/// Overlay

DropdownMenu

A menu of actions opened from a button — items, checkboxes, radio groups, and nested submenus with full keyboard navigation.

import { DropdownMenu } from "@protocore/pds";

View as Markdown

Basics

DropdownMenu.Item takes a startIcon, an endHint (for a shortcut), and tone="danger" for destructive actions. DropdownMenu.Separator rules off a group.

Checkbox & radio items

CheckboxItem toggles independently (checked / onCheckedChange); RadioItem inside a RadioGroup is single-select (value / onValueChange). DropdownMenu.Label heads each section.

Submenus

Nest a DropdownMenu.Sub with a SubTrigger (shows a chevron) and SubContent. Submenus open on hover or on ArrowRight and keep full keyboard navigation.

When to use it

A DropdownMenu presents a list of commands or a set of toggles launched from a button — a row's overflow menu, a "⋯ Actions" control, a view/filter switcher. Items are actions (they do something on select), and the menu closes after a choice.

Don't confuse it with a [Select](/inputs/select): a Select edits a single form value and shows the current selection in its trigger; a DropdownMenu fires actions. For the same menu opened by right-click on a surface rather than a button, use [ContextMenu](/overlay/context-menu) — identical parts, different trigger. If you need arbitrary interactive content (a form, a slider) rather than a list of items, that's a [Popover](/overlay/popover).

Usage

Use it for action lists and quick toggles launched from a button.
Group related items with DropdownMenu.Label and Separator.
Put shortcut hints in endHint so they align on the right.
Mark destructive items with tone="danger" and place them last.

Don't

Use it to set a form value — that's a Select.
Nest more than one level of submenu; deep trees are hard to navigate.
Fill items with arbitrary form controls — reach for a Popover.
Leave a danger item mid-list where it's easy to hit by accident.

Accessibility

Keys	Action
`Enter / Space`	Opens the menu from the trigger; activates the focused item.
`↑ / ↓`	Moves focus between items (roving tabindex).
`→`	Opens a submenu from its SubTrigger.
`←`	Closes the current submenu, returning to its trigger.
`Home / End`	Jumps to the first / last item.
`A–Z`	Typeahead — jumps to the next item starting with the typed character.
`Esc`	Closes the menu and returns focus to the trigger.

Roles from Radix: menu / menuitem / menuitemcheckbox / menuitemradio, correctly wired.
Focus is trapped in the open menu and restored to the trigger on close.
Checkbox and radio items expose their checked state to assistive tech.
Icons in items are decorative; the label carries the accessible name.

`DropdownMenu.Content` props

Prop	Type	Default
`asChild`	`boolean`	—
`className`	`string`	—
`style`	`CSSProperties`	—

`DropdownMenu.Item` props

Prop	Type	Default	Description
`asChild`	`boolean`	—
`className`	`string`	—
`endHint`	`ReactNode`	—	Optional trailing hint (shortcut, chevron).
`startIcon`	`ReactNode`	—	Optional leading icon slot.
`style`	`CSSProperties`	—
`tone`	`enum`	`neutral`	Set `"danger"` to render a destructive item (danger-fg text).