Menubar

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarLabel,
  MenubarShortcut,
} from "@tessinaui/ui";

<Menubar>
  <MenubarMenu value="file">
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem shortcut="⌘N">New tab</MenubarItem>
      <MenubarItem shortcut="⌘⇧N">New window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem shortcut="⌘P">Print…</MenubarItem>
    </MenubarContent>
  </MenubarMenu>

  <MenubarMenu value="edit">
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem shortcut="⌘Z">Undo</MenubarItem>
      <MenubarItem shortcut="⌘⇧Z">Redo</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Showcase

When to use

Reach for Menubar when building desktop-style application shells — editors, design tools, IDE-like products. The pattern users expect: a horizontal strip of top-level triggers (File, Edit, View, Help), each opening a vertical dropdown with commands, shortcuts, separators, submenus.

If you want website navigation instead — logo, nav items, mega-menus — use NavigationMenu. If you only need a single dropdown attached to a button, use DropdownMenu.

Behaviour

• Single open at a time — opening one menu closes any other
• Hover-switch — once any menu is open, hovering a sibling trigger opens it (classic menubar UX)
• Arrow-key roving focus — ArrowLeft / ArrowRight move between top-level triggers, with loop for wrapping (RTL flips direction)
• Type-ahead — type a letter to focus the matching item inside an open menu (Base UI built-in)
• Escape closes — and returns focus to the trigger

API Reference

Menubar props

MenubarMenu props

MenubarTrigger props

Renders a <button>. Accepts all standard button HTML attributes plus the disabled prop.

MenubarContent props

MenubarItem props

MenubarCheckboxItem props

checked, onCheckedChange, plus all MenubarItem props. Renders a check indicator on the start side when checked.

MenubarRadioGroup + MenubarRadioItem props

MenubarRadioGroup takes value and onValueChange. Each MenubarRadioItem takes a value and shows a filled circle when selected.

MenubarSub / MenubarSubTrigger / MenubarSubContent

Composed exactly like the parent — MenubarSub wraps the pair, MenubarSubTrigger shows a chevron (auto-flipped in RTL), MenubarSubContent opens to the side.

MenubarLabel, MenubarSeparator, MenubarShortcut, MenubarGroup

Layout primitives — MenubarLabel for section headings, MenubarSeparator for hairlines, MenubarShortcut for inline shortcut badges (also auto-rendered when an item has a shortcut prop), MenubarGroup for grouping items semantically.

Notes

• Built by composing @base-ui/react/menu instances — Base UI does not ship a dedicated menubar primitive, so the bar-level orchestration (shared open state, hover-switch, arrow-key roving focus) is implemented in this component.
• Each MenubarMenu is a controlled Menu.Root driven by the bar's open value. This means you can fully control the bar by lifting value/onValueChange to your own state.
• For a single dropdown attached to a button, use DropdownMenu. For website primary navigation with mega-menus, use NavigationMenu.