Basel Standard / Docs

Menubar

Application-level command bar for dense workspaces and document-scale actions.

Menubars are for stable, top-level commands that belong to the current workspace or document. In this system the treatment stays flat and typographic, so the command spine remains visible without reading like a decorative desktop imitation.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Export review PDF</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Why This Primitive Exists

Use a menubar when the page has a persistent command vocabulary that should stay available at the top of the surface.

It suits editors, admin tools, archive workspaces, and other dense application shells.
It is stronger than a dropdown menu because the command categories remain visible before interaction.
It is lighter than a toolbar when actions need grouping, shortcuts, nested menus, or radio and checkbox selection.

Examples

Basic Menubar

This is the minimal pattern: one or more named menus, each with a short list of document-level actions.

Mode And Display Controls

Checkbox items and radio groups work well when the workspace exposes long-lived display or density choices.

<MenubarRadioGroup value={density} onValueChange={setDensity}>
  <MenubarRadioItem value="compact">Compact density</MenubarRadioItem>
  <MenubarRadioItem value="balanced">Balanced density</MenubarRadioItem>
  <MenubarRadioItem value="immersive">Immersive density</MenubarRadioItem>
</MenubarRadioGroup>

In Context

The menubar becomes most useful when it defines the command spine for a real workspace. Inline controls can then stay focused on the current row or panel.

Application chrome

Menubars suit dense workspaces where commands should stay visible before the user reaches for a contextual menu.

2 pending approvals

Release workspace

The menubar handles stable, document-level commands. Row actions and inline controls can stay lighter because the global command spine is already established.

Guidance

Use It For Stable Commands

Put document, workspace, or view-level actions here.
Do not move row actions or one-off utility buttons into the menubar just because space is available.
Keep trigger labels short so the bar reads as a scan line, not a sentence.

Group Before You Add Depth

Start with a few broad menus such as File, View, or Inspect.
Use separators and labels to structure longer command lists.
Reach for submenus only when a flat list stops being legible.

Keep Keyboard Use In Mind

Include MenubarShortcut when a command is frequently repeated.
Use radio groups for exclusive modes and checkbox items for persistent toggles.
Keep the command names explicit so keyboard and pointer users learn the same vocabulary.

API Reference

Root Exports

Export	Purpose
`Menubar`	Top-level root that lays out visible command categories.
`MenubarMenu`	Wraps one trigger and its associated content.
`MenubarTrigger`	Visible category button in the menubar row.
`MenubarContent`	Dropdown panel for a menu.
`MenubarItem`	Standard command row.
`MenubarCheckboxItem`	Toggleable command row.
`MenubarRadioGroup`	Exclusive mode group.
`MenubarRadioItem`	Single option inside a radio group.
`MenubarLabel`	Quiet section label inside menu content.
`MenubarSeparator`	Divider between item groups.
`MenubarShortcut`	Right-aligned shortcut hint text.
`MenubarSub`	Nested submenu root.
`MenubarSubTrigger`	Trigger row for submenu content.
`MenubarSubContent`	Nested submenu panel.
`MenubarGroup`	Structural grouping wrapper.
`MenubarPortal`	Portal export from Radix.

Repo-Specific Notes

Menubar uses a flat bordered container with no shadow by default.
MenubarTrigger, MenubarItem, and related rows use uppercase compact typography to match the rest of the system.
MenubarContent defaults to align="start", alignOffset={-4}, and sideOffset={6}.
MenubarItem, MenubarSubTrigger, and MenubarLabel support an inset prop for aligned nested content.

Previous: Label Next: Navigation Menu