MenuBar

A persistent horizontal bar of top-level menus modelled on desktop application menus.

stable
since v0.1.0
4.5 kB
overlay
menu
accessible

Preview

tsx

import {
  MenuBar,
  MenuBarContent,
  MenuBarItem,
  MenuBarMenu,
  MenuBarTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <MenuBar>
      <MenuBarMenu>
        <MenuBarTrigger>File</MenuBarTrigger>
        <MenuBarContent>
          <MenuBarItem>New</MenuBarItem>
          <MenuBarItem>Open</MenuBarItem>
          <MenuBarItem>Save</MenuBarItem>
        </MenuBarContent>
      </MenuBarMenu>
      <MenuBarMenu>
        <MenuBarTrigger>Edit</MenuBarTrigger>
        <MenuBarContent>
          <MenuBarItem>Undo</MenuBarItem>
          <MenuBarItem>Redo</MenuBarItem>
          <MenuBarItem>Cut</MenuBarItem>
          <MenuBarItem>Copy</MenuBarItem>
          <MenuBarItem>Paste</MenuBarItem>
        </MenuBarContent>
      </MenuBarMenu>
      <MenuBarMenu>
        <MenuBarTrigger>View</MenuBarTrigger>
        <MenuBarContent>
          <MenuBarItem>Zoom in</MenuBarItem>
          <MenuBarItem>Zoom out</MenuBarItem>
        </MenuBarContent>
      </MenuBarMenu>
    </MenuBar>
  );
}

Variants

With shortcuts

Use MenuBarShortcut to render trailing kbd-chip hints — they are decorative and not announced.

Preview

Open

tsx

import {
  MenuBar,
  MenuBarContent,
  MenuBarItem,
  MenuBarMenu,
  MenuBarSeparator,
  MenuBarShortcut,
  MenuBarTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <MenuBar>
      <MenuBarMenu>
        <MenuBarTrigger>File</MenuBarTrigger>
        <MenuBarContent>
          <MenuBarItem>
            New file
            <MenuBarShortcut>⌘N</MenuBarShortcut>
          </MenuBarItem>
          <MenuBarItem>
            Open…
            <MenuBarShortcut>⌘O</MenuBarShortcut>
          </MenuBarItem>
          <MenuBarSeparator />
          <MenuBarItem>
            Save
            <MenuBarShortcut>⌘S</MenuBarShortcut>
          </MenuBarItem>
          <MenuBarItem>
            Save as…
            <MenuBarShortcut>⇧⌘S</MenuBarShortcut>
          </MenuBarItem>
        </MenuBarContent>
      </MenuBarMenu>
      <MenuBarMenu>
        <MenuBarTrigger>Edit</MenuBarTrigger>
        <MenuBarContent>
          <MenuBarItem>
            Undo
            <MenuBarShortcut>⌘Z</MenuBarShortcut>
          </MenuBarItem>
          <MenuBarItem>
            Redo
            <MenuBarShortcut>⇧⌘Z</MenuBarShortcut>
          </MenuBarItem>
        </MenuBarContent>
      </MenuBarMenu>
    </MenuBar>
  );
}

With submenus

Nest MenuBarSub + MenuBarSubTrigger + MenuBarSubContent for hierarchical actions like “Open recent”.

Preview

Open

tsx

import {
  MenuBar,
  MenuBarContent,
  MenuBarItem,
  MenuBarMenu,
  MenuBarSeparator,
  MenuBarSub,
  MenuBarSubContent,
  MenuBarSubTrigger,
  MenuBarTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <MenuBar>
      <MenuBarMenu>
        <MenuBarTrigger>File</MenuBarTrigger>
        <MenuBarContent>
          <MenuBarItem>New file</MenuBarItem>
          <MenuBarItem>Open…</MenuBarItem>
          <MenuBarSub>
            <MenuBarSubTrigger>Open recent</MenuBarSubTrigger>
            <MenuBarSubContent>
              <MenuBarItem>Q4 planning.md</MenuBarItem>
              <MenuBarItem>cynosure-app/README.md</MenuBarItem>
              <MenuBarItem>notes.md</MenuBarItem>
              <MenuBarSeparator />
              <MenuBarItem>Clear recent</MenuBarItem>
            </MenuBarSubContent>
          </MenuBarSub>
          <MenuBarSeparator />
          <MenuBarItem>Save</MenuBarItem>
        </MenuBarContent>
      </MenuBarMenu>
    </MenuBar>
  );
}

Checkbox and radio items

Toggle view settings with MenuBarCheckboxItem; pick exclusive options with MenuBarRadioItem inside a MenuBarRadioGroup.

Preview

Open

tsx

import {
  MenuBar,
  MenuBarCheckboxItem,
  MenuBarContent,
  MenuBarLabel,
  MenuBarMenu,
  MenuBarRadioGroup,
  MenuBarRadioItem,
  MenuBarSeparator,
  MenuBarTrigger,
} from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [wrap, setWrap] = useState(false);
  const [minimap, setMinimap] = useState(true);
  const [zoom, setZoom] = useState('100');

  return (
    <MenuBar>
      <MenuBarMenu>
        <MenuBarTrigger>View</MenuBarTrigger>
        <MenuBarContent>
          <MenuBarLabel>Editor</MenuBarLabel>
          <MenuBarSeparator />
          <MenuBarCheckboxItem checked={wrap} onCheckedChange={setWrap}>
            Word wrap
          </MenuBarCheckboxItem>
          <MenuBarCheckboxItem checked={minimap} onCheckedChange={setMinimap}>
            Show minimap
          </MenuBarCheckboxItem>
          <MenuBarSeparator />
          <MenuBarLabel>Zoom</MenuBarLabel>
          <MenuBarSeparator />
          <MenuBarRadioGroup value={zoom} onValueChange={setZoom}>
            <MenuBarRadioItem value="75">75%</MenuBarRadioItem>
            <MenuBarRadioItem value="100">100%</MenuBarRadioItem>
            <MenuBarRadioItem value="125">125%</MenuBarRadioItem>
          </MenuBarRadioGroup>
        </MenuBarContent>
      </MenuBarMenu>
    </MenuBar>
  );
}

API

PropTypeDefaultDescription

container

HTMLElement|(() => HTMLElement)

—

className

string

—

Accessibility

The root exposes role="menubar"; each menu content exposes role="menu"; items expose role="menuitem".
Left / Right arrow keys cycle between top-level menus; Up / Down move within an open menu; type-ahead selects matching items.
Pressing Esc closes the currently open menu and returns focus to its trigger.
MenuBarCheckboxItem carries role="menuitemcheckbox"; MenuBarRadioItem carries role="menuitemradio".
MenuBarShortcut is aria-hidden="true" — visible only as a hint.

Recipes

Mirror desktop conventions: File, Edit, View, Help from left to right.
Prefer disabled items over removing them so the menu’s shape is stable between states.
Pair with CommandPalette so power users can reach the same actions via keyboard search.
Keep top-level triggers short — single words read fastest at a glance.