Vitral 0.2
Menu

Dock

A strip of large icons that grow under the pointer, each labelled with a tooltip.

WAI-ARIA tested

Import

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

Bottom

Last opened: —
<script setup lang="ts">import { Dock, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? '');const apps: MenuItem[] = [    { label: 'Files', icon: 'folder', command: run },    { label: 'Calendar', icon: 'calendar', command: run },    { label: 'Notifications', icon: 'bell', command: run },    { label: 'Settings', icon: 'sliders', command: run },    { label: 'Downloads', icon: 'download', command: run },    { label: 'Trash', icon: 'trash', command: run }];</script> <template>    <div style="display: flex; align-items: flex-end; justify-content: center; height: 10rem; border-radius: 8px; background: linear-gradient(135deg, var(--vt-primary-100), var(--vt-primary-300))">        <Dock :model="apps" aria-label="Apps" style="margin-bottom: 0.75rem" />    </div>    <small style="color: var(--vt-text-muted-color)">Last opened: {{ last }}</small></template>

Left

<script setup lang="ts">import { Dock, type MenuItem } from '@vitral/vue'; const apps: MenuItem[] = [    { label: 'Files', icon: 'folder' },    { label: 'Calendar', icon: 'calendar' },    { label: 'Notifications', icon: 'bell' },    { label: 'Settings', icon: 'sliders' },    { label: 'Downloads', icon: 'download' },    { label: 'Trash', icon: 'trash' }];</script> <template>    <Dock :model="apps" position="left" aria-label="Apps (vertical)" /></template>

API

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

Props

NameTypeDescription
modelMenuItem[]The items; each item's `label` names it and shows as a tooltip.
position'bottom' | 'top' | 'left' | 'right'The edge it sits on. Defaults to `'bottom'`.
magnificationbooleanGrow the items under the pointer. Defaults to true.
ariaLabelstringNames the dock.
ariaLabelledbystring—

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

Slots

NameSlot propsDescription
item(props: { item: MenuItem; index: number })An item's content: an icon or an image.