Dropdown

Navigation

A contextual menu triggered by a button. Requires a trigger slot and an items array.

Props

Prop	Type	Default	Description
`items`	`DsDropdownItem[]`	—	Array of menu items ({ label, value?, disabled?, destructive?, divider? }).
`placement`	`'bottom-start' \| 'bottom-end' \| 'bottom' \| 'top-start' \| 'top-end' \| 'top'`	`'bottom-start'`	Menu placement relative to trigger.
`disabled`	`boolean`	`false`	Disable the dropdown trigger.

Examples

vue

<DsDropdown
  :items="[
    { label: 'Edit', value: 'edit' },
    { label: 'Duplicate', value: 'duplicate' },
    { divider: true },
    { label: 'Delete', value: 'delete', destructive: true },
  ]"
  placement="bottom-start"
>
  <template #trigger>
    <DsButton variant="secondary">Actions</DsButton>
  </template>
</DsDropdown>

Accessibility

Uses role="menu" and role="menuitem" on the menu and items.
Closes on ESC key and outside click.
Arrow keys navigate between menu items.

Breadcrumb

Menubar