# Dropdown

> Context menu on Radix, on the overlay surface. The highlighted row takes the brand tint and its icon and shortcut turn brand. Items, icons, labels, shortcuts, checkbox and radio items, submenus and keyboard navigation.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/dropdown

## Install

```bash
npx @entrepta/cli@latest add dropdown
```

Files: `primitives/dropdown.tsx`, `primitives/kbd.tsx`, `lib/overlay.ts`.
npm packages: `@radix-ui/react-dropdown-menu`, `@phosphor-icons/react`.
Comes with: `kbd`, `overlay-lib`.

## Usage

```tsx
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator,
  DropdownMenuLabel, DropdownMenuShortcut,
  DropdownMenuDestructiveItem,
} from "@/components/entrepta/dropdown"
import { GearIcon, UserIcon } from "@phosphor-icons/react"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary">~/options ↓</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>account</DropdownMenuLabel>
    <DropdownMenuItem>
      <UserIcon aria-hidden size={14} /> profile.tsx
      <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <GearIcon aria-hidden size={14} /> settings.json
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuDestructiveItem>rm -rf session</DropdownMenuDestructiveItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | - | Controlled open state |
| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | "bottom" | Placement relative to trigger (on DropdownMenuContent) |
| `align` | `"start" \| "center" \| "end"` | "start" | Alignment along the trigger (on DropdownMenuContent) |