Menubar

Desktop-app style menu bar (File / Edit / View) with roving focus between menus (Base UI Menubar).

Import

import { Menubar, MenubarMenu, MenubarItem, MenubarCheckboxItem, MenubarSubmenu, MenubarSeparator } from '@marbleui/ui'

Props

<Menubar>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
className	`string`	`—`

<MenubarMenu>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
label *required	`ReactNode`	`—`

<MenubarItem>

Prop	Type	Default
children *required	`ReactNode`	`—`
disabled	`boolean`	`—`
onClick	`() => void`	`—`
shortcut	`string`	`—`

<MenubarCheckboxItem>

Prop	Type	Default
checked *required	`boolean`	`—`
children *required	`ReactNode`	`—`
onCheckedChange *required	`(v: boolean) => void`	`—`

<MenubarSubmenu>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
label *required	`ReactNode`	`—`

<MenubarSeparator>

No props of its own.

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: Base UI Menu · Base UI Menubar. Follow the primitive's docs for the full keyboard map.

Usage notes

Desktop-app style menu bar (File, Edit, View). For a single button-triggered menu use Menu; for right-click use ContextMenu.

<Menubar>
  <MenubarMenu label="File">
    <MenubarItem shortcut="⌘N" onClick={newFile}>New file</MenubarItem>
    <MenubarSubmenu label="Export">
      <MenubarItem>PDF</MenubarItem>
    </MenubarSubmenu>
  </MenubarMenu>
</Menubar>

Built on Base UI Menubar, so items use onClick. Available parts: MenubarItem, MenubarCheckboxItem (checked and onCheckedChange, so it is controlled), MenubarSubmenu and MenubarSeparator.
shortcut is display only; it doesn’t bind the key.
Triggers share one focus group, so arrow keys move between menus.

Example source · show

import { useState } from 'react'
import { Menubar, MenubarCheckboxItem, MenubarItem, MenubarMenu, MenubarSeparator, MenubarSubmenu } from './menubar'

function Demo() {
  const [grid, setGrid] = useState(true)
  const [rulers, setRulers] = useState(false)
  return (
    <div className="flex h-64 items-start">
      <Menubar>
        <MenubarMenu label="File">
          <MenubarItem shortcut="⌘N">New file</MenubarItem>
          <MenubarItem shortcut="⌘O">Open…</MenubarItem>
          <MenubarSubmenu label="Export">
            <MenubarItem>PDF</MenubarItem>
            <MenubarItem>PNG</MenubarItem>
            <MenubarItem>SVG</MenubarItem>
          </MenubarSubmenu>
          <MenubarSeparator />
          <MenubarItem shortcut="⌘P">Print</MenubarItem>
        </MenubarMenu>
        <MenubarMenu label="Edit">
          <MenubarItem shortcut="⌘Z">Undo</MenubarItem>
          <MenubarItem shortcut="⇧⌘Z" disabled>Redo</MenubarItem>
          <MenubarSeparator />
          <MenubarItem shortcut="⌘X">Cut</MenubarItem>
          <MenubarItem shortcut="⌘C">Copy</MenubarItem>
        </MenubarMenu>
        <MenubarMenu label="View">
          <MenubarCheckboxItem checked={grid} onCheckedChange={setGrid}>Show grid</MenubarCheckboxItem>
          <MenubarCheckboxItem checked={rulers} onCheckedChange={setRulers}>Show rulers</MenubarCheckboxItem>
        </MenubarMenu>
      </Menubar>
    </div>
  )
}

export const styles = { Default: Demo }

Source: packages/ui/src/menubar/menubar.tsx

Catalog

Category: navigation
Priority: Core
Primitive: base-ui
Base UI: Menubar