Menubar

Menubar renders a horizontal role="menubar" command strip. Top-level triggers move with left/right arrows and each trigger can open a collision-aware vertical menu panel using the same MenuItem shape as Menu.

Anatomy

• #trigger: Custom top-level trigger content.
• #[item.slot]: Per-item render override for a top-level trigger or panel item.
• #checkbox-item: Shared checkbox item renderer.
• #radio-item: Shared radio item renderer.
• #label: Shared label row renderer.

Usage

<script setup lang="ts">
import { Menubar } from "akaza-ui";

const items = [
  { label: "File", children: [{ label: "New file" }, { label: "Open" }] },
  { label: "View", children: [{ label: "Preview" }, { label: "Source" }] },
];
</script>

<template>
  <Menubar :items="items" aria-label="Editor menu" />
</template>

Examples

Radio groups

Pass radioValues for radio menu items. The event contract matches Menu.

<template>
  <Menubar
    v-model:radio-values="radioValues"
    :items="[
      { label: 'View', children: [
        { type: 'radio', label: 'Preview', value: 'preview', radioGroup: 'view' },
        { type: 'radio', label: 'Source', value: 'source', radioGroup: 'view' },
      ] },
    ]"
  />
</template>

Custom trigger

Use #trigger when top-level menu buttons need icons or badges.

<template>
  <Menubar :items="items">
    <template #trigger="{ item, isOpen }">
      <span>{{ item.label }}</span>
      <span aria-hidden="true">{{ isOpen ? "▲" : "▼" }}</span>
    </template>
  </Menubar>
</template>

Controlled menu and top-level actions

Plain items without children are commands. Bind default v-model to control the open top-level menu.

<Menubar
  v-model="openMenu"
  :items="[
    { value: 'file', label: 'File', children: fileItems },
    { value: 'save', label: 'Save', onSelect: save },
  ]"
/>

API Reference

Props

Emits

Slots

UI Options

Styling Hooks

Popup entry and exit use a subtle side-aware structural transition. Override --akaza-menubar-duration to change its 120ms duration. Reduced-motion preference shortens it automatically.

Keyboard