IMenubar ​

An application menubar — File, Edit, View. Once one menu is open, hovering another swaps to it without a second click.

<script setup lang="ts">
const menus = [
  {
    label: 'File',
    items: [
      { label: 'New invoice', onSelect: create },
      '-',
      { label: 'Export as', items: [{ label: 'PDF', onSelect: exportPdf }] },
    ],
  },
  { label: 'Edit', items: [{ label: 'Undo', onSelect: undo }] },
]
</script>

<template>
  <IMenubar :menus="menus" />
</template>

When to reach for one ​

A menubar suits a document-like application with a large set of commands. For a handful of actions on a page, use an IToolbar or a single IDropdownMenu.

Menus and entries ​

Each menu takes the same entry shape as IDropdownMenu: separators, submenus, danger and icons all behave the same way.

A menu's value identifies it, and falls back to the label.

const menus = [
  { label: 'File', value: 'file', items: fileItems },
  { label: 'Edit', items: editItems }, //     value is "Edit"
  { label: 'Tools', disabled: true, items: [] }, // present but not openable
]

Controlling which menu is open ​

v-model holds the value of the open menu, or undefined when none is.

<IMenubar v-model="openMenu" :menus="menus" />

Bare ​

Drops the container so the triggers sit directly on the page — for an app shell that already provides its own bar.

<IMenubar :menus="menus" bare />

Props ​

MenubarMenuOption ​

Slots ​

Accessibility ​

The bar is one Tab stop. Arrow keys move between menus, ↵ or ↓ opens one, and while a menu is open the left and right arrows move to its neighbours. Escape closes and returns focus to the trigger.