Vitral 0.2
Menu

Menu

A list of commands and links, inline or as a popup, with groups and separators.

WAI-ARIA tested

Import

main.ts
import { Menu } from '@vitral/vue';

Inline, with groups

Last command: —
<script setup lang="ts">import { Menu, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? ''); const grouped: MenuItem[] = [    {        label: 'Documents',        items: [            { label: 'New', icon: 'plus', command: run },            { label: 'Search', icon: 'search', command: run }        ]    },    {        label: 'Profile',        items: [            { label: 'Settings', icon: 'sliders', command: run },            { label: 'Notifications', icon: 'bell', command: run, disabled: true },            { label: 'Help', icon: 'externalLink', url: '#' }        ]    }];</script> <template>    <Menu :model="grouped" aria-label="Account" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

API

Read from packages/vue/src/components/Menu/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
modelMenuItem[]—
popupbooleanA popup menu, opened by `toggle(event)` / `show(event)` and anchored to the event's element.
appendTostringWhere a popup renders: `'body'` (the default), `'self'` to stay in place, or a selector.
placementOverlayPlacement—
ariaLabelstringNames the menu. A popup without one is named by the element that opened it.
ariaLabelledbystring—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
show——
hide——

Slots

NameSlot propsDescription
start—Content before the items.
end—Content after the items.
item(props: { item: MenuItem; label: string | undefined; focused: boolean; disabled: boolean })An item's content: its icon and label. The menuitem element around it, with its role and keyboard, stays.
submenulabel(props: { item: MenuItem })A group's heading.

Used in these templates