Menubar

A desktop-style File / Edit / View menu strip. Supports action items, checkbox toggles, submenus, separators, and keyboard shortcuts. Follows the WAI-ARIA Menubar pattern.

Preview

Document content area

Item types

Type	role	Description
action	menuitem	Executes an action. Optional shortcut label.
check	menuitemcheckbox	Toggles a boolean state. Shows a checkmark when checked.
sub	menuitem + submenu	Opens a nested menu on hover/arrow right.
separator	separator	Horizontal rule for visual grouping — no interaction.

Keyboard interactions

Key	Context	Action
← →	Menubar	Move focus between top-level menu triggers
↓ / Enter	Trigger	Open menu, focus first item
↑ ↓	Open menu	Move focus between items
→	Submenu item	Open submenu
← / Escape	Submenu	Close submenu, return to parent
Escape	Open menu	Close menu, return focus to trigger
Home / End	Open menu	Focus first / last item

Implementation

Menubar.tsx

tsx

import { Menubar } from "@/components/ui/Menubar";
import { useState } from "react";

function EditorMenubar() {
  const [wordWrap, setWordWrap] = useState(true);

  const menus = [
    {
      label: "File",
      items: [
        { label: "New File",  shortcut: "⌘N", onSelect: () => {} },
        { label: "Open…",     shortcut: "⌘O", onSelect: () => {} },
        { type: "separator" },
        { label: "Save",      shortcut: "⌘S", onSelect: () => {} },
      ],
    },
    {
      label: "View",
      items: [
        {
          type: "check",
          label: "Word Wrap",
          checked: wordWrap,
          onToggle: () => setWordWrap(v => !v),
        },
        {
          type: "sub",
          label: "Zoom",
          items: [
            { label: "Zoom In",    shortcut: "⌘+", onSelect: () => {} },
            { label: "Zoom Out",   shortcut: "⌘−", onSelect: () => {} },
          ],
        },
      ],
    },
  ];

  return <Menubar menus={menus} />;
}

Guidelines

→Use the Menubar for document-centric apps (editors, IDEs, dashboards) — not for marketing sites or simple navigation.
→Show keyboard shortcuts in the menu but bind them independently — users rely on shortcuts even when the menu is closed.
→Separate destructive actions (Delete, Reset) from regular actions with a separator and place them last.
→Keep menu labels to one or two words (File, Edit, View) — longer labels are harder to scan.
→On macOS web apps consider matching the native menu bar order: File, Edit, Format, View, Window, Help.