Dropdown Menu

Overview

A dropdown menu is a popup surface that appears in response to a trigger — an icon button, an avatar, a "more options" control — and presents a short list of actions. It is built on the Base UI Menu primitive — roving focus, typeahead, Esc / outside-click dismissal and ARIA roles are handled for you — and styled to the Material-3 surface: surface-container, 4px corners and the elevation-2 shadow.

Compose it from DropdownMenuTrigger (pair it with a Button via render) and DropdownMenuContent, then fill the content with DropdownMenuItems, DropdownMenuSeparators and DropdownMenuLabels.

Examples

Item anatomy

Each DropdownMenuItem can carry a leadingIcon, a trailingIcon (an icon, a status glyph or a DropdownMenuShortcut) and a second line of supportingText. Mark the active row with selected for the high-emphasis secondary-container state, or inset to align a label with the rows that have a leading icon. Use variant="destructive" for the error tone.

Selection (checkbox & radio)

Use DropdownMenuCheckboxItem for independent toggles and DropdownMenuRadioGroup + DropdownMenuRadioItem for a single choice. The checked row reuses the selected styling and shows a leading check / dot.

Submenus

Nest related actions with DropdownMenuSub, DropdownMenuSubTrigger (it gets the trailing chevron automatically) and DropdownMenuSubContent — the "indented actions" pattern for grouping sub-categories without crowding the top level.

Installation

npx morpha-ui add dropdown-menu

API Reference

DropdownMenuItem adds the props below; all Base UI Menu.Item props (disabled, onClick, label, …) are forwarded, and children is the row label.

DropdownMenuContent forwards the Base UI placement props (side, align, sideOffset, alignOffset):

The other parts — DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger and DropdownMenuSubContent — forward their Base UI props.

Accessibility

• The menu uses Base UI roving focus: ↑/↓ move between items, →/← open and close submenus, and typeahead jumps to a matching item.
• Keyboard focus draws the inset secondary ring and a 10% state layer; pointer hover shows the 8% layer — so keyboard and pointer users get distinct, on-tone feedback.
• Disabled items (disabled) are skipped by keyboard navigation and dimmed to 38%.
• Esc and outside-click close the menu and restore focus to the trigger (handled by Base UI). When an item's label is not plain text, pass label so typeahead works.
• The enter animation scales from the trigger and fades from 0.95; under prefers-reduced-motion only the fade remains.