Dropdown

A floating menu that appears when triggered, used for contextual actions and navigation.

Import

tsx

import { Dropdown, DropdownTitle, DropdownDivider, DropdownItem } from '@tac-ui/native';

Basic Menu

Tap the trigger to open a floating menu. Items are pressable and support an onPress handler.

tsx

<Dropdown trigger={<Button variant="outline">Open Menu</Button>}>
  <DropdownItem onPress={() => {}}>Profile</DropdownItem>
  <DropdownItem onPress={() => {}}>Settings</DropdownItem>
  <DropdownItem onPress={() => {}}>Help</DropdownItem>
</Dropdown>

With Title and Divider

Use DropdownTitle to label a group of items and DropdownDivider to visually separate sections.

tsx

<Dropdown trigger={<Button variant="outline">Account</Button>}>
  <DropdownTitle>My Account</DropdownTitle>
  <DropdownItem onPress={() => {}}>Profile</DropdownItem>
  <DropdownItem onPress={() => {}}>Settings</DropdownItem>
  <DropdownDivider />
  <DropdownItem onPress={() => {}}>Sign Out</DropdownItem>
</Dropdown>

With Destructive Item

Pass destructive to a DropdownItem to render it in error colors, signaling a dangerous or irreversible action.

tsx

<Dropdown trigger={<Button variant="outline">Options</Button>}>
  <DropdownItem onPress={() => {}}>Edit</DropdownItem>
  <DropdownItem onPress={() => {}}>Duplicate</DropdownItem>
  <DropdownDivider />
  <DropdownItem destructive onPress={() => {}}>Delete</DropdownItem>
</Dropdown>

Alignment

Control which edge of the menu aligns to the trigger using the align prop.

tsx

<Dropdown trigger={<Button variant="outline">Start</Button>} align="start">
  <DropdownItem onPress={() => {}}>Item A</DropdownItem>
  <DropdownItem onPress={() => {}}>Item B</DropdownItem>
</Dropdown>
<Dropdown trigger={<Button variant="outline">Center</Button>} align="center">
  <DropdownItem onPress={() => {}}>Item A</DropdownItem>
  <DropdownItem onPress={() => {}}>Item B</DropdownItem>
</Dropdown>
<Dropdown trigger={<Button variant="outline">End</Button>} align="end">
  <DropdownItem onPress={() => {}}>Item A</DropdownItem>
  <DropdownItem onPress={() => {}}>Item B</DropdownItem>
</Dropdown>

Controlled Open State

Pass open and onOpenChange to control the dropdown programmatically from outside the component.

tsx

const [open, setOpen] = useState(false);

<Button onPress={() => setOpen(true)}>Open Externally</Button>
<Dropdown
  open={open}
  onOpenChange={setOpen}
  trigger={<Button variant="outline">Controlled</Button>}
>
  <DropdownItem onPress={() => setOpen(false)}>Close</DropdownItem>
</Dropdown>

API Reference

Prop	Type	Default	Description
trigger	React.ReactNode	-	The element that opens the dropdown when pressed.
open	boolean	-	Controlled open state; omit to use uncontrolled mode.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
align	"start" \| "center" \| "end"	"start"	Horizontal alignment of the menu relative to the trigger.
children	React.ReactNode	-	Dropdown items and sections.

DropdownItem props:

Prop	Type	Default	Description
onPress	() => void	-	Called when the item is pressed.
destructive	boolean	false	Renders the item in error colors to signal a dangerous action.
disabled	boolean	false	Prevents interaction and renders the item with reduced opacity.
children	React.ReactNode	-	Item label content.

DropdownTitle props:

Prop	Type	Default	Description
children	React.ReactNode	-	Section title label in the dropdown.

DropdownDivider props:

Prop	Type	Default	Description
-	-	-	A horizontal divider between menu sections. Accepts no props.