Skip to content

Menu

Menu displays a list of actions or options in a dropdown. Use for overflow actions, navigation, or contextual options.

Preview

Basic Usage

<Menu
  trigger={<IconButton icon={<MoreIcon />} accessibilityLabel="Menu" />}
  items={[
    { key: 'edit', label: 'Edit' },
    { key: 'share', label: 'Share' },
    { key: 'delete', label: 'Delete', destructive: true },
  ]}
  onSelect={(key) => handleAction(key)}
/>

With Icons

<Menu
  trigger={<IconButton icon={<MoreIcon />} accessibilityLabel="Options" />}
  items={[
    { key: 'edit', label: 'Edit Reading', icon: <EditIcon /> },
    { key: 'copy', label: 'Copy to Clipboard', icon: <CopyIcon /> },
    { key: 'favorite', label: 'Add to Favorites', icon: <StarIcon /> },
    { key: 'export', label: 'Export', icon: <ExportIcon /> },
  ]}
  onSelect={handleSelect}
/>

With Dividers

<Menu
  items={[
    { key: 'view', label: 'View Details' },
    { key: 'edit', label: 'Edit', divider: true },
    { key: 'move', label: 'Move to Folder' },
    { key: 'archive', label: 'Archive', divider: true },
    { key: 'delete', label: 'Delete', destructive: true },
  ]}
  onSelect={handleSelect}
  trigger={<Button>Actions</Button>}
/>

Disabled Items

<Menu
  items={[
    { key: 'open', label: 'Open' },
    { key: 'edit', label: 'Edit (Locked)', disabled: true },
    { key: 'share', label: 'Share' },
    { key: 'delete', label: 'Delete (Protected)', disabled: true },
  ]}
  onSelect={handleSelect}
  trigger={<Button>Options</Button>}
/>

Long-press to trigger.

<ContextMenu
  items={[
    { key: 'edit', label: 'Edit' },
    { key: 'share', label: 'Share' },
    { key: 'delete', label: 'Delete', destructive: true },
  ]}
  onSelect={handleSelect}
>
  <Card>
    <Text>Long press for options</Text>
  </Card>
</ContextMenu>

API Reference

Prop	Type	Default	Description
`items`	`MenuItem[]`	Required	Menu items
`trigger`	`ReactNode`	Required	Trigger element
`onSelect`	`(key: string) => void`	Required	Selection handler
`placement`	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	`'bottom-end'`	Menu placement
`style`	`ViewStyle`	-	Custom styles

MenuItem

Prop	Type	Required	Description
`key`	`string`	Yes	Unique item identifier
`label`	`string`	Yes	Item label
`icon`	`ReactNode`	No	Item icon
`disabled`	`boolean`	No	Disabled state
`destructive`	`boolean`	No	Destructive styling
`divider`	`boolean`	No	Show divider after

ContextMenu Props

Prop	Type	Default	Description
`items`	`MenuItem[]`	Required	Menu items
`onSelect`	`(key: string) => void`	Required	Selection handler
`children`	`ReactNode`	Required	Long-pressable content
`delayMs`	`number`	`500`	Long press delay