Menubar

A desktop-app menu bar — File, Edit, View — for editors, back-office tools and anything that runs like an application. One tab stop, arrow keys between menus, submenus, checkbox and radio items, keycap shortcuts. Same item parts and MenuEntry model as Dropdown Menu and Context Menu.

Installation

Usage

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@vamos-ui/react";

<Menubar aria-label="Document">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem shortcut="mod+s" onSelect={save}>Save</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

// or from data
<Menubar aria-label="Invoices" menus={[{ id: "file", label: "File", items: entries }]} />

Keyboard: Tab reaches the bar once; ← → move between triggers (and keep a menu open while moving); ↓, Enter or Space open; Esc closes and returns focus; typing jumps to an item.

For a single menu behind a button use Dropdown Menu; for site navigation use Navigation Menu. A menubar is for commands.

Panels portal into the nearest ThemeScope. Only the first layer is glass; submenus are opaque.

Examples

API