Navigation

Menubar

A horizontal menu bar offering access to application commands via dropdown menus.

Preview

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from '@brika/clay/components/menubar';
/** Application menu bar with File, Edit, and View menus. */
export default function MenubarDefaultDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Copy link</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Find <MenubarShortcut>⌘F</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Toggle Sidebar</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Full Screen <MenubarShortcut>⌃⌘F</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

01 Installation

Install

Pull Menubar from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Menubar } from "@brika/clay";

tsxGranular1 line

import { Menubar } from "@brika/clay/components/menubar";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxMenubar.tsx67 lines

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from '@brika/clay/components/menubar';
/** Application menu bar with File, Edit, and View menus. */
export default function MenubarDefaultDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Copy link</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Find <MenubarShortcut>⌘F</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Toggle Sidebar</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Full Screen <MenubarShortcut>⌃⌘F</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

03 Examples

Menubar, every way

Full

Checkbox items for toggled settings and radio items for mutually exclusive options.

GitHub

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from '@brika/clay/components/menubar';
/** Checkbox items for toggled settings and radio items for mutually exclusive options. */
export default function MenubarFullDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Show toolbar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show status bar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show activity bar</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Panel position</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarRadioGroup value="bottom">
                <MenubarRadioItem value="bottom">Bottom</MenubarRadioItem>
                <MenubarRadioItem value="right">Right</MenubarRadioItem>
                <MenubarRadioItem value="left">Left</MenubarRadioItem>
              </MenubarRadioGroup>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Zoom in <MenubarShortcut>⌘+</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Zoom out <MenubarShortcut>⌘-</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Reset zoom <MenubarShortcut>⌘0</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

04 Accessibility

Accessibility

Arrow keys navigate between top-level triggers; Enter/Space opens the dropdown.
Escape closes the open dropdown; Tab moves focus outside the menubar entirely.
Each MenubarMenu is a role="menu" with its trigger as role="menuitem".
Keyboard shortcuts shown in items are visual only, implement the actual shortcuts separately.

05 Tokens 10 theme-overridable

Theme tokens

Every CSS variable Menubar reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Menubar without touching component code.

Menubar tokens

10 tokens

ColorFill, border, and text colors.2

--menubar-containercolorvar(--background)
components.menubar.container
Background of the menubar root rail.
--menubar-border-colorcolorvar(--input)
components.menubar.borderColor
Border color of the menubar root rail.

GeometrySizes, lengths, and corner radii.4

--menubar-radiusradiusvar(--radius-control)
components.menubar.radius
Menubar root border radius.
--menubar-heightsize2.25rem
components.menubar.height
Default menubar height.
--menubar-padding-xsizecalc(var(--spacing) * 1.5)
components.menubar.paddingX
Inline padding inside the menubar.
--menubar-padding-ysizecalc(var(--spacing) * 1)
components.menubar.paddingY
Block padding inside the menubar.

BorderBorder width and style.2

--menubar-border-widthborder-width1px
components.menubar.borderWidth
Border width on the menubar. Set non-zero for outline-style variants.
--menubar-border-styleborder-stylesolid
components.menubar.borderStyle
Border style on the menubar (`solid`, `dashed`, `double`, `none`).

MotionAnimation duration and easing.2

--menubar-durationdurationvar(--motion-standard-duration)
components.menubar.duration
Transition duration for menubar state changes.
--menubar-easingeasingvar(--motion-standard-easing)
components.menubar.easing
Transition easing for menubar state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.menubar, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "menubar": {
      "paddingX": "calc(var(--spacing) * 1.5)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-menubar-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Menubar. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<Menubar />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarCheckboxItem />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarContent />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarGroup />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarItem />

2 props

inset
boolean
When true, adds extra leading padding to align with icon items.
variantdefault 'default'
'default' | 'destructive'
"default" or "destructive", destructive renders in red.

<MenubarLabel />

1 prop

inset
boolean
No description.

<MenubarMenu />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarPortal />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarRadioGroup />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarRadioItem />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarSeparator />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarShortcut />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarSub />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarSubContent />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MenubarSubTrigger />

1 prop

inset
boolean
No description.

<MenubarTrigger />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.