# Dropdown Menu

Menu anchored to its button that grows out of the trigger, with rows appearing in turn. Checkable items draw their tick and pause briefly before the menu closes.

> Composed · Free · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add dropdown-menu
```

## Import

```tsx
import { DropdownMenu } from "@/components/ui/dropdown-menu/dropdown-menu";
```

## Variants

- `sort` — Sort: `npx @lumioui/cli add dropdown-menu-sort`
- `thread` — Thread: `npx @lumioui/cli add dropdown-menu-thread`

## Props

### DropdownMenu

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `boolean` | Controlled open state. |
| `defaultOpen?` | `boolean` | Uncontrolled initial state. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `children` | `React.ReactNode` | — |

### DropdownMenuTrigger

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | — |
| `className?` | `string` | — |
| `lit?` | `boolean` | The touched thing leads: while the menu is open the trigger holds a  soft pill-shaped wash, lit 60ms before the panel grows out of it.  Default false — triggers with their own shaped surface keep theirs. |

### DropdownMenuContent

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `align?` | `"start" | "end"` | Horizontal alignment relative to the trigger. Default "start". |
| `sideOffset?` | `number` | Extra vertical offset below the trigger. Default 6. |
| `material?` | `"solid" | "glass"` | Menu surface. "solid" (default) is an opaque popover surface; "glass" opts into Lumio glass — only when the menu floats over photos/video. |

### DropdownMenuItem

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | Item label. |
| `icon?` | `React.ReactNode` | Optional icon rendered before the label. |
| `trailing?` | `React.ReactNode` | Optional trailing slot — a checkmark for the selected option, a shortcut, or a value. |
| `selected?` | `boolean` | Marks a single-select option as chosen (announced to screen readers). |
| `destructive?` | `boolean` | Render in destructive style. |
| `check?` | `boolean` | Single-select row that carries its own drawn check: a pick draws the  check on (240ms) and holds it 200ms before the menu dims and `onPress`  fires, while the previous row's check dims. Default false. |
| `className?` | `string` | Extra classes for the row. |

### DropdownMenuSeparator

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |

Source: https://lumioui.com/components/dropdown-menu