Dropdown

A menu anchored to a trigger. Opens on click or ArrowDown, moves with the arrow keys, and closes on Escape, a selection, or a click outside.

Examples

Basic

Show code

<Dropdown {items} label="Account" onSelect={(id) => (selected = id)}>
  {#snippet trigger(attrs)}
    <Button {...attrs} variant="outline">Account</Button>
  {/snippet}
</Dropdown>

End aligned

Show code

<Dropdown {items} align="end" label="Actions">
  {#snippet trigger(attrs)}
    <Button {...attrs} variant="ghost">Actions</Button>
  {/snippet}
</Dropdown>

Props

Prop	Type	Default	Description
`items`	`{ id: string; label: string; href?: string; disabled?: boolean }[]`	`—`	Menu entries. An href renders a link, otherwise a button.
`trigger`	`Snippet<[TriggerProps]>`	`—`	Renders the trigger. Spread the props onto a focusable element; they wire the click, keys, aria-haspopup and aria-expanded.
`open`	`boolean`	`false`	Whether the menu is open. Bind it with bind:open.
`align`	`"start" \| "end"`	`"start"`	Which edge of the trigger the menu lines up with.
`label`	`string`	`—`	Accessible name for the menu.
`onSelect`	`(id: string) => void`	`—`	Called with the item id before the menu closes.

The trigger snippet supplies onclick, onkeydown, aria-haspopup and aria-expanded, so a Button works unchanged. The menu is absolutely positioned — avoid an overflow: hidden ancestor. Items with href render links and close on click.