# Dropdown Menu

A list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/dropdown-menu
```

## Usage

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

export function Example() {
  return (
    <DropdownMenu
      label="Project"
      entries={[
        { label: 'Edit project', shortcut: ['⌘', 'E'], onSelect: edit },
        { kind: 'separator' },
        { label: 'Archive', destructive: true, onSelect: archive },
      ]}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| entries | MenuEntry[] | required |
| label | string | required |
| trigger | (props) => ReactNode |  |
| icon | ReactNode |  |
| avatar | ReactNode |  |
| align | start, end | start |
| open | boolean |  |
| defaultOpen | boolean | false |
| onOpenChange | (open) => void |  |
| animated | boolean | true |

## When to use

- For actions on one object or view.
- Five to nine rows, grouped with labels.
- Destructive actions go last, behind a divider.

## When not to use

- For choosing a value: use Select.
- For search across the app: use Command.
- For the signed in account with status and theme: use Dropdown.

## Accessibility

- The trigger has aria-haspopup and aria-expanded.
- Rows are menuitem, menuitemcheckbox or menuitemradio with aria-checked.
- Shortcuts are exposed with aria-keyshortcuts.
- Disabled rows stay focusable with aria-disabled, so they can still be read.

## Motion

- Opens in 160 ms from the trigger, scaling from 0.96 and dropping 4 px. Closes with a 100 ms fade.
- The highlight glides between rows in 100 ms, by pointer or keys.
- A chosen action flashes its wash, then the menu closes.
- Submenus slide in 8 px over 180 ms. Checks draw and radio dots pop, and the menu stays open.
- With reduced motion, the menu and submenus appear in place and toggles swap.