NAVIGATION

DropdownMenu

Composable action menu built on Radix DropdownMenu. Memphis-bordered surface, full keyboard wiring (Enter / Space, arrows, Esc, type-ahead), and selection chrome on radio items that mirrors the NavItem gradient. For a non-menu floating panel (free-form preferences, an editor popover, custom chrome), reach for Popover instead.

Import

1import {
2  DropdownMenu,
3  DropdownMenuTrigger,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuLabel,
7  DropdownMenuSeparator,
8  DropdownMenuCheckboxItem,
9  DropdownMenuRadioGroup,
10  DropdownMenuRadioItem,
11  DropdownMenuShortcut,
12} from 'damo-ui'

Basic actions

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button variant="ghost">Open menu</Button>
4  </DropdownMenuTrigger>
5  <DropdownMenuContent>
6    <DropdownMenuLabel>Account</DropdownMenuLabel>
7    <DropdownMenuItem>
8      Profile
9      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
10    </DropdownMenuItem>
11    <DropdownMenuItem>Billing</DropdownMenuItem>
12    <DropdownMenuSeparator />
13    <DropdownMenuItem>Sign out</DropdownMenuItem>
14  </DropdownMenuContent>
15</DropdownMenu>

Mixed item types

DropdownMenu also exposes DropdownMenuCheckboxItem and DropdownMenuRadioGroup + DropdownMenuRadioItem when the menu drives state instead of firing actions.

<DropdownMenuCheckboxItem checked={…}>…</DropdownMenuCheckboxItem>

Props

DropdownMenu props
PropTypeDefaultDescription
openboolean—Controlled open state on the root.
defaultOpenboolean—Uncontrolled initial open state.
onOpenChange(open: boolean) => void—Fires when the menu opens or closes.
modalbooleantrueProp on the root. Default modal traps focus. Set false to allow interaction with the rest of the page while open.
align'start' | 'center' | 'end''center'Prop on DropdownMenuContent. Inline alignment relative to the trigger.
side'top' | 'right' | 'bottom' | 'left''bottom'Prop on DropdownMenuContent. Preferred edge to anchor against.

Accessibility

  • Radix wires the ARIA Menu pattern: trigger gets aria-haspopup + aria-expanded; items get role="menuitem" / menuitemcheckbox / menuitemradio.
  • Keyboard: Enter / Space open the menu and activate items, arrows cycle, Esc closes, type-ahead jumps to the first item starting with the typed string.

DropdownMenu vs ContextMenu vs Popover

  • DropdownMenu opens on click and is the standard "more actions" affordance.
  • ContextMenu opens on right-click of an arbitrary surface (table rows, canvas, file lists).
  • Popover is for free-form floating content (forms, search, help) — not a menu.
← TabsContextMenu →