Dropdown Menu

An anchored action menu that grows from its trigger. Supports icons, keyboard shortcuts, group headings, separators, destructive items, and nested submenus. Full roving-focus keyboard navigation. Closes on outside click or Escape.

Installation

npx stepwise-ui add dropdown-menu

Default

import { DropdownMenu } from '@/components/stepwise/dropdown-menu'

<DropdownMenu
  trigger={<Button size="sm">Actions</Button>}
  items={[
    { heading: 'Manage' },
    { label: 'Edit', icon: <EditIcon />, shortcut: '⌘E' },
    { label: 'Duplicate', icon: <CopyIcon />, shortcut: '⌘D' },
    { separator: true },
    { label: 'Delete', icon: <TrashIcon />, destructive: true },
  ]}
/>

Text only

Omit `icon` on every item - no icon gutter is reserved, labels start flush at the leading edge.

<DropdownMenu
  trigger={<Button size="sm">Account</Button>}
  items={[
    { label: 'Profile' },
    { label: 'Billing' },
    { label: 'Team settings' },
    { separator: true },
    { label: 'Sign out', destructive: true },
  ]}
/>

Nested

Give an item its own `items` array and it becomes a submenu trigger - a trailing chevron replaces the shortcut slot, and it opens on hover, click, or `→`. Flips to the left edge automatically if it would overflow the viewport.

<DropdownMenu
  trigger={<Button size="sm">File Actions</Button>}
  items={[
    { label: 'Edit', icon: <EditIcon />, shortcut: '⌘E' },
    {
      label: 'Share',
      icon: <ShareIcon />,
      items: [
        { label: 'Copy link', icon: <LinkIcon /> },
        { label: 'Invite by email', icon: <MailIcon /> },
      ],
    },
    { separator: true },
    { label: 'Delete', icon: <TrashIcon />, destructive: true },
  ]}
/>

Alignment

Props

PropTypeDescription

trigger

ReactNode

Element that toggles the menu.

items

DropdownEntry[]

Items, { separator: true }, or { heading }.

align

'start' | 'end'

Edge to anchor to. Default start.

className

string

Merged onto the wrapper.

Each item accepts `label`, `icon`, `shortcut`, `onSelect`, `destructive`, `disabled`, and `items` (nested `DropdownEntry[]` - presence turns the row into a submenu trigger and its own `onSelect` is ignored).