Skip to main content

​
Overview

Print⌘P
Menubar is a horizontal menu bar — the same pattern found in desktop applications like VS Code, Chrome, and Figma. It exposes top-level menus (File, Edit, View) that open dropdown panels on click.

​
Installation

npm install @araf-ds/core

​
Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarLabel,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
          <MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Print <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
          <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Cut <MenubarShortcut>⌘X</MenubarShortcut></MenubarItem>
          <MenubarItem>Copy <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
          <MenubarItem>Paste <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarRadioGroup value="100%">
            <MenubarLabel>Zoom</MenubarLabel>
            <MenubarRadioItem value="75%">75%</MenubarRadioItem>
            <MenubarRadioItem value="100%">100%</MenubarRadioItem>
            <MenubarRadioItem value="125%">125%</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

​
API Reference

​
disabled
boolean
default:"false"
Disables the item.
​
onSelect
() => void
Callback fired on selection. Menu closes automatically.
​
checked
boolean
Controlled checked state.
​
onCheckedChange
(checked: boolean) => void
Callback when checked state changes.
​
value
string
Selected radio value (on group) or item value.
​
onValueChange
(value: string) => void
Callback when radio selection changes.

​
Accessibility

  • Menubar uses role="menubar" with aria-orientation="horizontal"
  • Each MenubarMenu trigger has role="menuitem" and aria-haspopup="menu"
  • Keyboard: Left/Right arrows move between top-level triggers; Down/Enter opens the dropdown; Escape closes
  • When a menu is open, Up/Down navigate items and Left/Right move to adjacent top-level menus

​
Do’s & Don’ts

Do

  • Use Menubar for desktop-class web applications (editors, dashboards, IDEs)
  • Include keyboard shortcuts in MenubarShortcut to match native app conventions
  • Group related actions with MenubarSeparator and MenubarLabel
  • Limit top-level menus to 4–6 items

Don't

  • Don’t use Menubar on mobile-first products — use a bottom sheet or hamburger menu
  • Don’t duplicate the same actions in both Menubar and a Toolbar — pick one
  • Don’t use for simple single-level navigation — use Tabs or Sidebar
  • Don’t nest sub-menus more than 2 levels deep