DropdownMenu

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

iOSAndroid

Preview DropdownMenu on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

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

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

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

<DropdownMenu
  trigger={<Button>Options</Button>}
  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