Menubar

When to useLink to "When to use"

• The application menu of an installed or desktop-style app, usually in its title bar.
• Many commands in a few familiar groups, where people expect File, Edit and View.

Use something else when:

• there is one group of commands: a Menu on a button
• the commands are a few visible actions: a Toolbar of Buttons
• the entries navigate between pages: SiteHeader or SideNav
• people search for commands: CommandPalette

UsageLink to "Usage"

import { Menubar } from "@arshad-shah/cynosure";
import { copy, folder, save } from "@arshad-shah/cynosure/icons";

<Menubar
  label="Application"
  menus={[
    {
      label: "File",
      items: [
        { value: "open", label: "Open", icon: folder, shortcut: "mod+o" },
        { value: "save", label: "Save", icon: save, shortcut: "mod+s", disabled: !dirty },
      ],
    },
    { label: "Edit", items: [{ value: "copy", label: "Copy", icon: copy, shortcut: "mod+c" }] },
    { label: "View", items: [{ value: "wrap", label: "Word wrap", kind: "checkbox", checked: wrap }] },
  ]}
  onSelect={(value) => run(value)}
/>

Each menu's items are exactly what Menu takes: icons, shortcuts (shown with Kbd and exposed as aria-keyshortcuts; bind the keys yourself with useHotkey), disabled, tone, checkable kinds, sections (labelled or not) and submenus (an item with items). onSelect receives the chosen item's value from whichever menu, so keep values unique across menus.

Moving between menusLink to "Moving between menus"

While a menu is open, hovering another title opens that menu instead, and so does tapping it. At rest, hovering opens nothing.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Roles: menubar named by label, with aria-orientation="horizontal"; each title is a menuitem with aria-haspopup="menu", aria-expanded and aria-controls naming its menu, which is named after the title.
• One menu at a time: opening one closes the other.
• Right to left: in an RTL page the bar reads from the right, and Left and Right swap.
• Shadow DOM: works inside a shadow root (keys, focus return and outside clicks).
• Layers: the menus use the shared overlay stack, so inside a dialog Escape closes only the open menu.

TouchLink to "Touch"

Each title's hit area is at least 24px, and 44px on coarse pointers; menu rows are 44px tall there. A tap opens a menu, a tap on another title switches to it and a tap on an item runs it.

ThemingLink to "Theming"

Tokens: --cy-menubar-height, --cy-menubar-padding-inline, --cy-menubar-radius, --cy-menubar-active-bg (hovered title and the open menu's title) and --cy-menubar-gap. The menus are Menu's, themed with --cy-menu-*.

createTheme({ components: { menubar: { height: "28px", radius: "4px" } } });

RelatedLink to "Related"

Menu · ContextMenu · Toolbar · CommandPalette · Kbd