build69
Sign inGet API key
build69  /  Components  /  Navigation  /  Menubar

Menubar

v1.0.1Updated 20 Jul 2026

Application menu bar (File / Edit / View…) built on Radix Menubar. Same item vocabulary and visual language as DropdownMenu — items, checkbox items, radio groups, nested submenus, separators and keyboard-shortcut hints —

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedmenumenubarapplication-menufile-menu+3

The default, out-of-the-box Menubar.

Recommended for+14
  • ✓Editor-style app chrome (invoice editor, document designer)
  • ✓Desktop-like admin tools with File/Edit/View menus
  • ✓Dense toolbars needing grouped command menus
Tags+6
menumenubarapplication-menufile-menuradixkeyboarddefault
Features+4
  • Horizontal bar of menus with roving tab index (one Tab stop)
  • Arrow-key navigation between menus, including while a menu is open
  • Full item vocabulary: Item, CheckboxItem, RadioGroup/RadioItem, Label, Separator, Shortcut
  • Nested submenus (Sub / SubTrigger / SubContent)
  • Destructive item variant + disabled items and triggers
  • Visual parity with DropdownMenu item styling
  • Controlled or uncontrolled active menu (value / defaultValue / onValueChange)
  • Sizes: sm / md (compact density preset)
  • Respects prefers-reduced-motion
Not recommended for−2
  • ✕Single contextual menus on a button (use DropdownMenu)
  • ✕Site navigation (use Navbar / Sidebar)
  • ✕Mobile-first layouts (use BottomNavigation or Sheet)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Menubar" })

Usage

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarShortcut } from '@build69/ui';

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New invoice<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
size

Density preset for the bar and its triggers (default md)

'sm' | 'md'—
value

Controlled open-menu value

string—
defaultValue

Uncontrolled initially open menu

string—
onValueChange

Open-menu change callback

(value: string) => void—
loop

Wrap arrow-key navigation at the ends

boolean—

Related

Platform docsAll componentsSource files