Menubar

Accessible, unstyled Menubar (WAI-ARIA APG menubar): a horizontal row of menu triggers with roving focus, typeahead, and Left/Right hand-off between open menus. Menu content, items, and submenus are the shared Menu parts re-exported under Menubar names.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Menubar, MenubarRoot, MenubarMenu, MenubarTrigger } from "@vizejs/ui/menubar";

Or copy the source into your project with vize lib pull menubar (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Application menubar with File and Edit menus whose open menu is bound with v-model. -->
<script setup lang="ts">
import { ref } from "vue";

import {
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from "@vizejs/ui/menubar";

const openMenu = ref<string | null>(null);
const lastCommand = ref("none");
</script>

<template>
  <div>
    <MenubarRoot v-model="openMenu" aria-label="Editor">
      <MenubarMenu value="file">
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem @select="() => (lastCommand = 'New file')">New file</MenubarItem>
          <MenubarItem @select="() => (lastCommand = 'Open')">Open…</MenubarItem>
          <MenubarSeparator />
          <MenubarItem disabled>Export as PDF</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu value="edit">
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem @select="() => (lastCommand = 'Undo')">Undo</MenubarItem>
          <MenubarItem @select="() => (lastCommand = 'Redo')">Redo</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </MenubarRoot>
    <output>Last command: {{ lastCommand }}</output>
  </div>
</template>

API

Menubar

Source: src/families/menus/menubar/menubar-root.vue

Props

Events

Slots

MenubarRoot

Source: src/families/menus/menubar/menubar-root.vue

Props

Events

Slots

Exposed

MenubarMenu

Source: src/families/menus/menubar/menubar-menu.vue

Props

Slots

Exposed

MenubarTrigger

Source: src/families/menus/menubar/menubar-trigger.vue

Props

Slots

Exposed

Behavior

@vizejs/ui/menubar implements the WAI-ARIA APG menubar pattern on the shared menu core (see ../menu/menu.behavior.md). menubar-root.vue owns the open-menu value and a roving tab stop across triggers; each menubar-menu.vue is a non-modal menu root; menubar-trigger.vue is a role="menuitem" button. Every row is proven by the named test in menubar.test.ts or menubar-ssr.test.ts.