Dropdown

Floating menus triggered by a button: actions, options, navigation.
On the web the menu is Dark Factory's: a card of bold rows that take the hover wash at once, an uppercase eyebrow over a section, muted shortcuts in their own column, and a disabled row in the muted ink rather than faded. iOS and Android keep their platform menus (the iOS pull-down menu, the Material 3 menu) in the theme's colours.
In glass mode the menu is a dense-layer glass card under its trigger (or above it when it fits there); the trigger keeps its place, its press and its accessible name and state, and a selection commits and closes the menu the moment a row is pressed. AvatarMenu and the collapsed Navbar menu are built on Dropdown. Solid mode paints the skin's own menu.
iOS
Android
Web
tsx
<Dropdown
trigger="Actions"
items={[
{ label: "Edit profile" },
{ label: "Duplicate" },
{ label: "Settings" }
]}
/>

Props

Prop
Description
trigger
string
Label for the default outline trigger button. Omit when supplying a custom trigger via `children`.
children
ReactNode
A custom trigger rendered in place of the default outline button, e.g. an avatar account chip. It is wrapped in a Pressable that toggles the menu; the menu itself still comes from `items`.
triggerLabel
string
The accessible name for a CUSTOM trigger (`children`). Without it the button is named from its own contents, which runs the trigger's text together into one unpunctuated string ("Rachel Chenrachel@example.com") and repeats any label a nested control already carries. Ignored by the default `trigger` button, which is named by its own text.
label
string
Optional muted section heading rendered above the rows (e.g. "Actions").
title
string
Identity header title, rendered in the popover foreground ABOVE everything else in the menu (an account name over its email, say). Pair it with `description`; passing neither omits the header block entirely.
description
string
Identity header second line, muted, under `title`.
items
required
DropdownItem[]
The menu rows, top to bottom.
alignEnd
boolean
Align the menu's TRAILING edge with the trigger's trailing edge instead of the leading edge (the default). For a trigger parked at the end of a bar, where a leading-aligned menu would run off the surface. Logical, so a right-to-left locale mirrors it.
disabled
boolean
Dimmed, inert trigger: the menu never opens and the press is a no-op.
open
boolean
Controlled open state. Omit for uncontrolled (the trigger opens/closes it).
onOpenChange
(open: boolean) => void
Fired when the open state changes (trigger press, select, etc.).
onSelect
(item: DropdownItem, index: number) => void
Fired with the selected item and its index when a row is pressed.
testID
string
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
Outer layout composition only (width/flex within a parent), never a restyle hook.

Do & Don’t

Trigger

Don’t
Always open: it clutters the page and there's no way to dismiss it.
Do
Click Actions to open; click outside to dismiss.

Sectioning

Don’t
Click an item: a long, flat menu of eight actions is hard to scan.
Do
Click an item: group related actions under labels with a separator.

Leading icons

Don’t
Click an item: icons on some rows but not others leave labels misaligned and the column ragged.
Do
Click an item: give every row a leading icon so labels share one start column.

Keyboard shortcuts

Don’t
Click an item: hints inline after the label crowd the text and never line up into a readable column.
Do
Click an item: push shortcuts to a muted, right-aligned column so the eye can scan them.

Disabled item

Don’t
Edit
Archive
Duplicate
Click Archive: it looks disabled but still fires, a greyed item that works is a trap.
Do
Click Archive: nothing happens; a real disabled item doesn't respond.

Destructive item

Don’t
Click an item: a destructive action wedged between routine ones invites a costly misclick.
Do
Click an item: separate destructive actions with a divider, color them, and place them last.
← Divider
Emblem →