Menubar

A visually persistent menu bar for desktop-style apps. Height h-8. Supports shortcuts, checkboxes, radios, and nested submenus.

Basic

Persistent File / Edit / View menus with shortcuts.

Installation

CLI

npx @sonojs/ui@latest add menubar

Also needsnpm i lucide-react

Composition

structure

Menubar
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarGroup
        │   ├── MenubarLabel
        │   ├── MenubarItem
        │   ├── MenubarCheckboxItem
        │   └── MenubarRadioGroup → MenubarRadioItem
        ├── MenubarSeparator
        └── MenubarSub
            ├── MenubarSubTrigger
            └── MenubarSubContent

Usage

menubar.tsx

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

export function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Print…</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Props

Prop	Type	Default	Description
inset	boolean	false	On `MenubarItem` / `MenubarLabel` / `MenubarSubTrigger` — indent to align with checkbox items.
variant	"default" · "destructive"	"default"	On `MenubarItem` — destructive styling for risky actions.
align	"start" · "center" · "end"	"start"	On `MenubarContent` — popup alignment.
className	string	—	Merge extra Tailwind classes on any part.