Primitives

Dropdown

Contextual menu triggered by a button or other element. Displays a list of actions, links, or options in a floating panel.

Live Demo

Interactive Dropdown

Installation

npm install @trinkui/react

Import

import { Dropdown, DropdownItem } from "@trinkui/react";

Usage

<Dropdown
  trigger={<Button>Options</Button>}
  items={[
    { label: "Edit", icon: <EditIcon />, onClick: handleEdit },
    { label: "Duplicate", icon: <CopyIcon />, onClick: handleDuplicate },
    { divider: true },
    { label: "Archive", icon: <ArchiveIcon />, disabled: true },
    { divider: true },
    { label: "Delete", icon: <TrashIcon />, danger: true, onClick: handleDelete },
  ]}
/>

Alignment

align="start"

align="center"

align="end"

<Dropdown align="start" ... />
<Dropdown align="center" ... />
<Dropdown align="end" ... />

Dropdown Props

Prop	Type	Default	Description
trigger	ReactNode	--	Element that toggles the dropdown menu
items	DropdownItem[]	--	Array of menu item objects
align	"start" \| "center" \| "end"	"start"	Horizontal alignment of the menu relative to the trigger

DropdownItem Props

Prop	Type	Default	Description
label	string	--	Text label for the menu item
icon	ReactNode	--	Icon displayed before the label
onClick	() => void	--	Click handler for the item
disabled	boolean	false	Disable the item interaction
danger	boolean	false	Apply destructive/danger styling (red text)
divider	boolean	false	Render a visual separator instead of an item

Accessibility

Trigger element has aria-expanded and aria-haspopup="menu".
Menu uses role="menu" with items as role="menuitem".
Arrow keys navigate between items; Enter / Space activate the focused item.
Escape closes the menu and returns focus to the trigger.
Disabled items are skipped during keyboard navigation.

Drawer Image