# rn-dropdown-menu
URL: /docs/native/components/dropdown-menu

Menu popup component with items, separators, and destructive actions.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-dropdown-menu
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import { DropdownMenu } from '@/components/docyrus-native/dropdown-menu';

}
  items={[
    { label: 'Edit', onPress: handleEdit },
    { label: 'Duplicate', onPress: handleDuplicate },
    { type: 'separator' },
    { label: 'Delete', onPress: handleDelete, destructive: true },
  ]}
/>
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `trigger` | `ReactNode` | — | Trigger element (required) |
| `items` | `DropdownMenuEntry[]` | — | Menu items and separators (required) |
| `align` | `'start' \| 'end'` | — | Menu alignment |
| `className` | `string` | — | Additional CSS classes |
| `menuClassName` | `string` | — | Menu panel CSS classes |

### DropdownMenuItem

| Property | Type | Description |
|----------|------|-------------|
| `label` | `string` | Item label |
| `icon` | `ReactNode` | Optional icon |
| `onPress` | `() => void` | Press handler |
| `destructive` | `boolean` | Destructive action styling |
| `disabled` | `boolean` | Disable this item |

### DropdownMenuSeparator

| Property | Type | Description |
|----------|------|-------------|
| `type` | `'separator'` | Separator marker |

## Type Exports

| Type | Description |
|------|-------------|
| `DropdownMenuProps` | Props for DropdownMenu |
| `DropdownMenuItem` | Menu item type |
| `DropdownMenuSeparator` | Separator type |
| `DropdownMenuEntry` | Union of item and separator |