overlays

DropdownMenu

Example

Import

import { DropdownMenu } from '@connor-adams/designsystem'

Usage

A row/overflow action menu (the ⋯ on a transaction, account, or report). Use danger for delete and a separator to group destructive actions.

<DropdownMenu
  align="end"
  trigger={<Button variant="ghost" size="sm">⋯</Button>}
  items={[
    { label: 'Edit category', onSelect: edit },
    { label: 'Mark reconciled', onSelect: reconcile },
    { separator: true },
    { label: 'Delete', danger: true, onSelect: remove },
  ]}
/>

Items accept icon, shortcut, disabled.

Props

Prop	Type	Default
trigger*	ReactNode	—
items	DropdownItem[]	[]
align	"end" \| "start" \| undefined	start
className	string \| undefined	—
style	CSSProperties \| undefined	—