Dropdown

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

Import

tsx

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

Basic Menu

Click the trigger to open a floating menu. Supports keyboard navigation with Arrow keys, Home, End, Enter, and Escape.

tsx

<Dropdown trigger={<Button variant="outline">Open Menu</Button>}>
  <DropdownItem>Profile</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>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>Profile</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>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>Edit</DropdownItem>
  <DropdownItem>Duplicate</DropdownItem>
  <DropdownDivider />
  <DropdownItem destructive>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>Item A</DropdownItem>
  <DropdownItem>Item B</DropdownItem>
</Dropdown>
<Dropdown trigger={<Button variant="outline">Center</Button>} align="center">
  <DropdownItem>Item A</DropdownItem>
  <DropdownItem>Item B</DropdownItem>
</Dropdown>
<Dropdown trigger={<Button variant="outline">End</Button>} align="end">
  <DropdownItem>Item A</DropdownItem>
  <DropdownItem>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 onClick={() => setOpen(true)}>Open Externally</Button>
<Dropdown
  open={open}
  onOpenChange={setOpen}
  trigger={<Button variant="outline">Controlled</Button>}
>
  <DropdownItem onClick={() => setOpen(false)}>Close</DropdownItem>
</Dropdown>

With Search

Add DropdownSearch at the top of the menu to let users filter a long list of items.

tsx

<Dropdown trigger={<Button variant="outline">Search Menu</Button>}>
  <DropdownSearch placeholder="Search..." />
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Analytics</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Help</DropdownItem>
</Dropdown>

API Reference

Prop	Type	Default	Description
trigger	React.ReactNode	-	The element that opens the dropdown when clicked.
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.