DropdownMenu

Keyboard-navigable dropdown with custom trigger and item list.

Default

import { DropdownMenu, Button } from '@canarist/ui'

<DropdownMenu
  trigger={<Button variant="outline">Actions</Button>}
  items={[
    { label: 'View details', onClick: () => navigate('/detail') },
    { label: 'Edit', onClick: () => setEditing(true) },
    { label: 'Delete', onClick: () => handleDelete() },
  ]}
/>

With disabled item

<DropdownMenu
  trigger={<Button>Options</Button>}
  items={[
    { label: 'Export CSV', onClick: () => exportCSV() },
    { label: 'Export PDF', disabled: true },
    { label: 'Share', onClick: () => share() },
  ]}
/>

Reference

Prop	Type	Default	Description
items	{ label: string; onClick?: () => void; disabled?: boolean }[]	—	Menu item definitions.
trigger	ReactNode	—	Element that opens the menu.
align	'left' \| 'right'	'left'	Horizontal alignment of the menu.
side	'top' \| 'bottom'	'top'	Vertical side the menu opens toward.
className	string	—	Additional CSS classes on the wrapper.