Menubar

Bar of BlessDropdownMenus

The File / Edit / View bar of a desktop-style app: a row of menus with commands. Site navigation is not a menubar; use NavigationMenu or SidebarNav — links in a menubar are announced as commands.

Basic

New⌘N

Open⌘O

Quit

Undo⌘Z

Redo⇧⌘Z

Sidebar

Status bar

← → moves between menus; open one then hover others

<script setup lang="ts">
import { BlessDropdownMenu, BlessMenubar, BlessText, type BlessMenuItem } from "blessing-ui";
const file: BlessMenuItem[] = [
  { label: "New", shortcut: "⌘N", value: "n" },
  { label: "Open", shortcut: "⌘O", value: "o" },
  { type: "separator" },
  { label: "Quit", value: "q" },
];
const edit: BlessMenuItem[] = [
  { label: "Undo", shortcut: "⌘Z", value: "u" },
  { label: "Redo", shortcut: "⇧⌘Z", value: "r" },
];
const view: BlessMenuItem[] = [
  { type: "checkbox", label: "Sidebar", value: "sb" },
  { type: "checkbox", label: "Status bar", value: "st" },
];
</script>

<template>
  <BlessMenubar label="App">
    <BlessDropdownMenu :items="file"
      ><template #trigger><button>File</button></template></BlessDropdownMenu
    >
    <BlessDropdownMenu :items="edit"
      ><template #trigger><button>Edit</button></template></BlessDropdownMenu
    >
    <BlessDropdownMenu :items="view"
      ><template #trigger><button>View</button></template></BlessDropdownMenu
    >
  </BlessMenubar>
  <BlessText as="p" size="xs" muted>← → moves between menus; open one then hover others</BlessText>
</template>

• Wrap DropdownMenus. The bar is one Tab stop: ← / → move between menus (and keep one open while you move), ↓ opens.
• Each trigger is told it opens a menu and whether it's open.
• label names the bar.

Usage

import { BlessMenubar } from "blessing-ui";

API

Props

Name	Type	Default	Description
label	string	—

Slots

Name	Scope	Description
default	—