Vue 3 · TypeScript · keyboard accessible

A menu bar you can dock to any edge.

The bar on this page is the component. Drag it to the left, right or bottom of the window, or pick an edge below. Menus nest to any depth, open with the arrow keys and take icons through slots.

pnpm add v-dock-menu

Docked to the top

Playground

Dock edge

Draggable Drop the bar near an edge to dock it there.

Keys: Tab to the bar, Enter to open, arrows to move, Esc to close.

on-selected payload

Choose any item from the bar. Its name and full path land here.

Usage

<script setup lang="ts">
  import { DockMenu, type SelectedItemModel } from 'v-dock-menu';
  import 'v-dock-menu/dist/index.css';

  const dock = ref('TOP');
  const items = [
    { name: 'File', menu: [{ name: 'Open' }, { isDivider: true }, { name: 'Exit' }] },
    { name: 'Edit', menu: [{ name: 'Cut' }, { name: 'Copy' }, { name: 'Paste' }] },
  ];
  const onSelected = ({ name, path }: SelectedItemModel) => console.log(name, path);
</script>

<template>
  <DockMenu v-model:dock="dock" :items="items" draggable :on-selected="onSelected" />
</template>