Dropdown

Button that opens a menu of actions with icons, shortcuts and separators. The size prop (xs, sm, md, lg, xl) sets the button and menu item density.

Jump to API reference

Import

Vue

import { UiDropdown } from '@ziyarago/ui/vue'

Actions

Vue

<UiDropdown
  label="Actions"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
 />

Small with icon

Vue

<UiDropdown
  label="Sort"
  size="sm"
  icon="arrow-up-down"
  :items="[{ label: 'Price', value: 'price' }, { label: 'Rating', value: 'rating' }, { label: 'Distance', value: 'dist' }]"
 />

Sizes

Vue

<UiDropdown
  size="xs"
  label="Actions"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
 />

<UiDropdown
  size="sm"
  label="Actions"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
 />

<UiDropdown
  size="md"
  label="Actions"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
 />

<UiDropdown
  size="lg"
  label="Actions"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
 />

<UiDropdown
  size="xl"
  label="Actions"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
 />

API reference

Button that opens a menu of actions; use for "more" menus and action lists.

Props

PropType and valuesDefaultDescription

labelstring—Text of the trigger button.

iconstring—Icon name before the label.

items

{ label: string; value?: string; icon?: string; shortcut?: string; tone?: 'danger'; disabled?: boolean; onClick?: (item) => void; separator?: boolean }[]

'[]'Menu entries. Item fields: label, value (passed to select), icon (icon name), shortcut (kbd hint on the right), tone "danger" (red), disabled true (dimmed, not clickable), onClick (called with the item when clicked, before the select event), separator true (renders a divider; other fields ignored).

disabledbooleanfalseDisables the trigger button so the menu cannot open.

sizexssmmdlgxl'md'Scale of trigger button and menu.

Events

Vue: @name. React: onName.

selectCalled with the item value when an entry is clicked. The menu closes first.

Notes

Each item may also have its own onClick and disabled. Open state is internal; the menu closes on outside click and on Escape.