# Dropdown menu
Dropdown menu is a neobrutalist React component from Cruise UI. A short list of actions behind one button, with icons, hints and a destructive item.
Install (with the @cruiseui registry in components.json, see Installation):
```bash
npx shadcn@latest add @cruiseui/dropdown-menu
```
Import: `import { CruiseDropdownMenu } from "@/components/cruise/dropdown-menu";`
## When to use
A few actions behind one button: edit, share, delete.
## When not to
Choosing a value in a form (use a Select).
## Example (React)
```tsx
"use client";
import { Copy, Pencil, Share2, Trash2 } from "lucide-react";
import { CruiseDropdownMenu } from "@/components/cruise/dropdown-menu";
export default function DropdownMenuExample() {
return (
, hint: "E" },
{ label: "Duplicate", icon: , hint: "D" },
{ label: "Share receipt", icon: },
"separator",
{ label: "Cancel order", icon: , danger: true },
]}
/>
);
}
```
## HTML
Needs theme.css (https://cruiseui.dev/theme.css).
```html
Delivery area
```
## Props: CruiseDropdownMenu
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | Trigger text. |
| `items` | `CruiseMenuEntry[]` | — | — |
| `variant?` | `CruiseButtonVariant` | `"secondary"` | — |
| `align?` | `"start" \| "end"` | `"start"` | — |
| `popupClassName?` | `string` | — | Extra classes on the menu, e.g. "nepa-mode" (it renders in ). |
| `className?` | `string` | — | — |
## Accessibility
- role="menu" with menuitems; arrows, Home/End and typing a letter move.
- Esc closes it and returns focus to the trigger; items are 44px tall.