Overlay

DropdownMenu

Pop-up menu of actions. Items are declared as data — no nested subcomponents — for a compact registry surface that covers the 90% case.

Examples

Basic

<DropdownMenu items={[
  {label: 'Edit', shortcut: '⌘E', onSelect: () => …},
  {label: 'Duplicate', shortcut: '⌘D', onSelect: () => …},
  {type: 'separator'},
  {label: 'Delete', tone: 'danger', onSelect: () => …},
]}>
  {#snippet trigger(props)}
    <Button {...props}>Actions</Button>
  {/snippet}
</DropdownMenu>

MenuItem type

type MenuItem =
  | { label: string; shortcut?: string; disabled?: boolean; tone?: 'default' | 'danger'; onSelect?: () => void }
  | { type: 'separator' }
  | { type: 'label'; label: string };

Props

Prop	Type	Default	Description
`items`	`MenuItem[]`	`—`	Array of items, separators, or label rows. See type below.
`open`	`boolean`	`false`	Bindable open state.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Where to anchor the menu.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Cross-axis alignment.
`trigger`	`Snippet`	`—`	The element that opens the menu when clicked.

Install

CLI

npm install bits-ui
npx @a3tai/mittsu add dropdown-menu