Dropdown Menu

uistable

Dropdown Menu — extracted 1:1 from WEM-App.

npx shadcn add @krawma/dropdown-menu

npm: lucide-react@^1.22.0, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States

opencloseddisabledfocus-visible

Keyboard

EnterSpaceArrowDownArrowUpArrowRightArrowLeftEscape

Depends on

utils

Purpose

A menu of actions triggered by a button (row actions, "more" menus, account menus). For choosing a value use select/combobox; for right-click use context-menu.

Anatomy

DropdownMenu › DropdownMenuTrigger › DropdownMenuContent (DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup/RadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub*, DropdownMenuShortcut).

Style

No variants — portalled token-backed surface. Use DropdownMenuLabel/Separator to group; destructive items via a data-variant/destructive styling on the item.

Behavior & functionality

Opens on trigger click; items fire and close the menu. Supports checkbox/radio items and nested submenus.

Accessibility

Menu/menuitem roles; arrows navigate (incl. into submenus), Enter/Space activate, Escape closes and returns focus to the trigger.
Icon-only triggers need an accessible name.

Do / Don't

✅ Use for actions; group with labels/separators.
❌ Don't use it as a form select — use select/combobox.