Menu

Static menu list, useful on its own or as the content of custom popups. The size prop (xs, sm, md, lg, xl) sets the item height, padding and text.

Jump to API reference

Import

Vue
import { UiMenu } from '@ziyarago/ui/vue'

Default

Vue
<UiMenu
  :items="[{ label: 'Profile', value: 'p', icon: 'user' }, { label: 'My trips', value: 't', icon: 'map' }, { separator: true }, { label: 'Sign out', value: 'out', icon: 'log-out', tone: 'danger' }]"
 />

Sizes

Vue
<UiMenu
  size="xs"
  :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' }]"
 />

<UiMenu
  size="sm"
  :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' }]"
 />

<UiMenu
  size="md"
  :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' }]"
 />

<UiMenu
  size="lg"
  :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' }]"
 />

<UiMenu
  size="xl"
  :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

Static vertical list of actions rendered inline; use in sidebars and custom popovers.

Props

PropType and valuesDefaultDescription
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).
openboolean—Optional. false renders nothing, true shows the menu; leave unset for an always visible menu.
sizexssmmdlgxl'md'Scale of row height and text.

Events

Vue: @name. React: onName.

selectCalled with the item value when an entry is clicked.
closeCalled on outside click or Escape while open is true. Pass it as onClose.

Notes

  • Always visible unless open is set. For a self-toggling menu use Dropdown, for a right-click menu use ContextMenu.