Kappa / Menu Bar

<script setup lang="ts">
import { ref } from "vue";
import { MenuBar } from "@dicehub/kappa/components/menu-bar";

const lastAction = ref("Choose a command");
</script>

<template>
  <MenuBar.Root aria-label="Document commands">
    <MenuBar.Menu value="file" @select="lastAction = $event.value">
      <MenuBar.Trigger>File</MenuBar.Trigger>
      <MenuBar.Content>
        <MenuBar.Item value="new">New document</MenuBar.Item>
        <MenuBar.Item value="open">Open…</MenuBar.Item>
        <MenuBar.Separator />
        <MenuBar.Item value="save">Save</MenuBar.Item>
      </MenuBar.Content>
    </MenuBar.Menu>
    <MenuBar.Menu value="edit" @select="lastAction = $event.value">
      <MenuBar.Trigger>Edit</MenuBar.Trigger>
      <MenuBar.Content>
        <MenuBar.Item value="undo">Undo</MenuBar.Item>
        <MenuBar.Item value="redo">Redo</MenuBar.Item>
      </MenuBar.Content>
    </MenuBar.Menu>
  </MenuBar.Root>
  <output aria-live="polite">{{ lastAction }}</output>
</template>

Installation

Barrel

import { MenuBar } from "@dicehub/kappa";

Granular

import { MenuBar } from "@dicehub/kappa/components/menu-bar";

Use a menu bar for repeated application commands such as File, Edit, and View. Give each Menu a unique value and the root an accessible label. Handle selection on each Menu, and on Sub for nested actions. Use Dropdown for a single action menu.

MenuBar.Root coordinates the open menu. MenuBar.Menu composes Kappa Dropdown, which uses Ark UI Menu for each popup. Kappa adds horizontal focus and pointer switching. SubTrigger keeps a portalled child open while the pointer crosses into it; moving to another parent item still closes the child. Ark UI has no dedicated application Menu Bar primitive.

Keyboard and Pointer

Tab enters the menu bar at one trigger. Left and Right arrows move between enabled triggers. Home and End move to the first or last trigger.
Enter, Space, or Down arrow opens a menu. Once open, Left and Right arrows switch top-level menus. Right arrow on a submenu trigger opens that submenu.
Escape closes the menu. When a menu is open, a brief hover over another trigger opens that menu. Crossing a trigger on the way to the current menu does not switch it.
Menu items, checkbox and radio state, typeahead, nested menus, and dismissal come from Kappa Dropdown and Ark UI Menu.

Examples

Nested Actions

Use a submenu for a short set of related choices.

<MenuBar.Root aria-label="Document commands">
  <MenuBar.Menu value="file" @select="handleAction($event.value)">
    <MenuBar.Trigger>File</MenuBar.Trigger>
    <MenuBar.Content>
      <MenuBar.Item value="save">Save</MenuBar.Item>
      <MenuBar.Sub aria-label="Export format" @select="handleAction($event.value)">
        <MenuBar.SubTrigger>Export as</MenuBar.SubTrigger>
        <MenuBar.SubContent>
          <MenuBar.Item value="export-pdf">PDF</MenuBar.Item>
          <MenuBar.Item value="export-svg">SVG</MenuBar.Item>
        </MenuBar.SubContent>
      </MenuBar.Sub>
    </MenuBar.Content>
  </MenuBar.Menu>
</MenuBar.Root>

Persistent Options

Checkbox and radio choices stay open while you change settings.

<script setup lang="ts">
import { ref } from "vue";
import { MenuBar } from "@dicehub/kappa/components/menu-bar";

const showGrid = ref(true);
const density = ref("comfortable");
</script>

<template>
  <MenuBar.Root aria-label="View commands">
    <MenuBar.Menu value="view">
      <MenuBar.Trigger>View</MenuBar.Trigger>
      <MenuBar.Content>
        <MenuBar.CheckboxItem v-model:checked="showGrid" value="grid">
          Show grid
        </MenuBar.CheckboxItem>
        <MenuBar.Separator />
        <MenuBar.RadioGroup v-model="density">
          <MenuBar.Label>Density</MenuBar.Label>
          <MenuBar.RadioItem value="compact">Compact</MenuBar.RadioItem>
          <MenuBar.RadioItem value="comfortable">Comfortable</MenuBar.RadioItem>
        </MenuBar.RadioGroup>
      </MenuBar.Content>
    </MenuBar.Menu>
  </MenuBar.Root>
</template>

Controlled and Disabled

Control the open menu with v-model and disable unavailable triggers.

<script setup lang="ts">
import { ref } from "vue";
import { MenuBar } from "@dicehub/kappa/components/menu-bar";

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

<template>
  <MenuBar.Root v-model="openMenu" aria-label="Workspace commands">
    <MenuBar.Menu value="file">
      <MenuBar.Trigger>File</MenuBar.Trigger>
      <MenuBar.Content>
        <MenuBar.Item value="save">Save</MenuBar.Item>
      </MenuBar.Content>
    </MenuBar.Menu>
    <MenuBar.Menu value="edit">
      <MenuBar.Trigger disabled>Edit</MenuBar.Trigger>
      <MenuBar.Content>
        <MenuBar.Item value="undo">Undo</MenuBar.Item>
      </MenuBar.Content>
    </MenuBar.Menu>
  </MenuBar.Root>
  <output>Open menu: {{ openMenu ?? "none" }}</output>
</template>

API Reference

Part	Purpose
`MenuBar.Root`	Menubar container. `v-model` controls the open menu value; `defaultValue` sets the initial value; `disabled` disables all triggers.
`MenuBar.Menu`	One top-level menu. Requires a unique `value`; emits `select` with the selected item value.
`MenuBar.Trigger`	Top-level menu trigger. Supports `disabled` and `asChild`.
`MenuBar.Content`	Popup surface. Supports `teleport`, `teleportTo`, and `asChild`.
`MenuBar.Item` and other menu parts	Kappa Dropdown parts: LinkItem, CheckboxItem, RadioGroup, RadioItem, Group, Label, Separator, Shortcut, Sub, SubTrigger, and SubContent.