# Dropdown menu

> Actions, checkboxes and radio options in a springy menu with full keyboard support.

Component · Free · https://lodeui.com/components/dropdown-menu

## When to use

- A list of actions on an object: rename, duplicate, delete.
- View options with radio or checkbox items, like Sort by.

## When not to use

- Setting a form value: use a select.
- Navigation: use links or a navigation menu.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/dropdown-menu.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { MoreHorizontal } from "lucide-react";
import { DropdownMenu } from "@/components/ui/dropdown-menu";

export function RowMenu({ onDelete }: { onDelete: () => void }) {
  return (
    <DropdownMenu
      align="end"
      trigger={<button type="button" aria-label="More actions"><MoreHorizontal /></button>}
      items={[
        { id: "rename", label: "Rename", shortcut: "R" },
        { type: "separator", id: "s" },
        { id: "delete", label: "Delete", destructive: true, onSelect: onDelete },
      ]}
    />
  );
}
```

## API reference

### DropdownMenu

A trigger and a menu of items, radio items, checkbox items, labels and separators.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `MenuEntry[]` | – | { id, label, icon?, shortcut?, destructive?, disabled?, onSelect? } or radio/checkbox items with checked, or label/separator. |
| label | `ReactNode` | – | Text for the default trigger button. |
| trigger | `ReactElement` | – | Your own trigger; ARIA and handlers are added to it. |
| align | `"start" \| "end"` | `"start"` | Menu alignment. |
| closeOnSelect | `boolean` | `true` | Set false to keep it open while toggling checkbox items. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space / ↓ | Open and focus the first item |
| ↑ / ↓ | Move between items |
| Home / End | First or last item |
| Enter / Space | Select |
| Esc | Close and return focus |
| Tab | Close |

## Accessibility

- role="menu" with menuitem, menuitemradio and menuitemcheckbox.
- The trigger has aria-haspopup and aria-expanded.
- Disabled items are skipped by the keyboard.

## Motion

- Scales in from its anchor corner; the highlight glides between items.

## Responsive behavior

- At least 192px wide; aligns to the trigger edge.

## Performance

- Items render only while open.

## Notes for AI

- Ids must be unique.
- Use destructive for irreversible actions and confirm them in a dialog.

## Related

- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Command palette](https://lodeui.com/components/command-palette) — Type to filter, arrow to move, Enter to run. Inline or as a ⌘K dialog.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.