## Dropdown Menu (S—023)

A menu button with submenus, checkbox and radio items, shortcuts, typeahead and full keyboard support.

- URL: https://sundaeui.dev/components/dropdown-menu
- Category: Navigation & menus · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/dropdown-menu.json`
- Tags: tailwind, keyboard, context-menu, react, menu, dropdown

A dropdown that supports everything an application menu needs: plain actions with icons and shortcut hints, toggles, single-choice radio groups, section labels, separators, a disabled state, and a red destructive action kept visually apart.
Opened from the keyboard, focus lands on the first item. Arrow keys, Home and End move, typing jumps to matching items, and Escape closes and returns focus to the button. Submenus open on hover, Arrow Right or Enter, and Arrow Left closes them. Opened with a pointer, it doesn’t steal focus.
Use it for overflow menus, project and file actions, and view settings. For navigation between pages, use links instead.

### Usage

```tsx
import { DropdownMenu } from '@/components/sundae/dropdown-menu'

<DropdownMenu
  trigger="Project"
  items={[
    { label: 'New file', shortcut: '⌘N', onSelect: createFile },
    { type: 'submenu', label: 'Share', items: [{ label: 'Copy link', onSelect: copyLink }] },
    { type: 'separator' },
    { type: 'checkbox', label: 'Show grid', checked: grid, onChange: setGrid },
    { label: 'Delete project', danger: true, onSelect: confirmDelete },
  ]}
/>
```

### Props

- `trigger` (`ReactNode`, required): Button content.
- `items` (`MenuItem[]`, required): item | checkbox | radio | submenu | separator | label.
- `label` (`string`): aria-label for icon-only triggers.
- `align` (`'start' | 'end'`, default `'start'`): Edge the menu aligns to.

### Accessibility

- Implements the WAI-ARIA menu button pattern: menu, menuitem, menuitemcheckbox and menuitemradio, with aria-checked, aria-haspopup and aria-expanded.
- Arrow keys, Home, End, typeahead and Escape all work. Focus returns to the trigger on close.
- Disabled items stay in the reading order with aria-disabled.