Components

Menubar

Horizontal bar of menus (File / Edit / View style) built on Radix. Bar is h-9 rounded-md with a subtle shadow-xs. Each menu opens as a dropdown with the same compound API as DropdownMenu (items, checkbox items, radio items, sub-menus, labels, separators, shortcuts).

Updated Jul 17, 2026 by Leonardo Posada

Anatomy

  1. 1
    Menubar (root)

    Horizontal container: h-9, rounded-md, border, bg-background, shadow-xs, gap-1 between menus.

  2. 2
    MenubarTrigger

    Top-level pill label (File / Edit / View). Hover + open state use bg-accent + accent-foreground.

  3. 3
    MenubarContent

    Dropdown panel: rounded-md, border, bg-popover, shadow-md, p-1. Items inside.

  4. 4
    MenubarItem

    One action row: px-2 py-1.5, rounded-sm. Hover uses bg-accent + accent-foreground. Disabled dims to opacity-50.

  5. 5
    MenubarShortcut

    Keyboard hint aligned right (ml-auto), text-xs muted-foreground.

  6. 6
    MenubarSubTrigger

    Item that opens a sub-menu; shows CaretRight on the right.

Item variants

Three item variants matching Figma: Default (plain action), Checkbox (toggleable with a Check indicator on the left), Radio (mutually exclusive, dot indicator).

Default
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New rule <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarItem>Open… <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Log out</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
Checkbox
<MenubarMenu>
  <MenubarTrigger>View</MenubarTrigger>
  <MenubarContent>
    <MenubarCheckboxItem checked>Show status bar</MenubarCheckboxItem>
    <MenubarCheckboxItem>Show sidebar</MenubarCheckboxItem>
    <MenubarCheckboxItem disabled>Show inspector</MenubarCheckboxItem>
  </MenubarContent>
</MenubarMenu>
Radio
<MenubarMenu>
  <MenubarTrigger>Density</MenubarTrigger>
  <MenubarContent>
    <MenubarRadioGroup value="comfortable">
      <MenubarRadioItem value="comfortable">Comfortable</MenubarRadioItem>
      <MenubarRadioItem value="compact">Compact</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarContent>
</MenubarMenu>
With submenu
<MenubarMenu>
  <MenubarTrigger>Share</MenubarTrigger>
  <MenubarContent>
    <MenubarItem>Copy link</MenubarItem>
    <MenubarSub>
      <MenubarSubTrigger>Export as…</MenubarSubTrigger>
      <MenubarSubContent>
        <MenubarItem>PDF</MenubarItem>
        <MenubarItem>PNG</MenubarItem>
        <MenubarItem>CSV</MenubarItem>
      </MenubarSubContent>
    </MenubarSub>
  </MenubarContent>
</MenubarMenu>
With label and separator
<MenubarMenu>
  <MenubarTrigger>Profiles</MenubarTrigger>
  <MenubarContent>
    <MenubarLabel>Team</MenubarLabel>
    <MenubarItem>Payments squad</MenubarItem>
    <MenubarItem>Risk squad</MenubarItem>
    <MenubarSeparator />
    <MenubarLabel>Personal</MenubarLabel>
    <MenubarItem>My workspace</MenubarItem>
  </MenubarContent>
</MenubarMenu>

States

Level 1 (triggers) and Level 2 (items inside a menu) share the same 3 states: Default, Hover / open (bg-accent + accent-foreground), Disabled (opacity-50, pointer-events-none).

Level 1 (triggers)
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger disabled>Edit</MenubarTrigger>
  </MenubarMenu>
</Menubar>
Level 2 (items inside a menu)
<MenubarContent>
  <MenubarItem>Default</MenubarItem>
  <MenubarItem disabled>Disabled action</MenubarItem>
</MenubarContent>
Rare in the Yuno Dashboard
The Menubar is an editor / desktop-app pattern. The Yuno Dashboard prefers DropdownMenu (one trigger button) and Navigation via the Sidebar. Use Menubar only when a prototype simulates a dedicated tool with grouped commands.

Recipes

Ready-to-copy compositions covering the most common Yuno usages of this atom.

Editor app menubar

The canonical File / Edit / View / Profiles bar. Use it as the top chrome of a small standalone editor or admin tool.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New rule <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarItem>Open… <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Log out</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
      <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked>Status bar</MenubarCheckboxItem>
      <MenubarCheckboxItem>Sidebar</MenubarCheckboxItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="me">
        <MenubarRadioItem value="me">My workspace</MenubarRadioItem>
        <MenubarRadioItem value="team">Team workspace</MenubarRadioItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
View options with checkbox + radio

'View' menu with a Checkbox item (show status bar) and a Radio group (density: comfortable / compact). Used when a menu has to persist visual preferences.

<MenubarMenu>
  <MenubarTrigger>View</MenubarTrigger>
  <MenubarContent>
    <MenubarCheckboxItem checked>Show status bar</MenubarCheckboxItem>
    <MenubarSeparator />
    <MenubarLabel>Density</MenubarLabel>
    <MenubarRadioGroup value="comfortable">
      <MenubarRadioItem value="comfortable">Comfortable</MenubarRadioItem>
      <MenubarRadioItem value="compact">Compact</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarContent>
</MenubarMenu>
Commands with a submenu

Item that opens a nested submenu (e.g. 'Share' → email / link / QR). Keep to a single level of nesting.

<MenubarMenu>
  <MenubarTrigger>Share</MenubarTrigger>
  <MenubarContent>
    <MenubarItem>Copy link</MenubarItem>
    <MenubarSub>
      <MenubarSubTrigger>Export as…</MenubarSubTrigger>
      <MenubarSubContent>
        <MenubarItem>PDF</MenubarItem>
        <MenubarItem>PNG</MenubarItem>
        <MenubarItem>CSV</MenubarItem>
      </MenubarSubContent>
    </MenubarSub>
  </MenubarContent>
</MenubarMenu>

Import

Copy this import line at the top of the file where you compose this atom.

Full compound surface. Import only what you use.
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar";

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

PropTypeDefaultDescription
Menubar.classNamestring—Merged onto the h-9 rounded-md bar. Do not override the height or the shadow-xs.
MenubarTrigger.disabledbooleanfalseDims the trigger and blocks the menu from opening.
MenubarContent.align"start" | "center" | "end""start"Alignment relative to the trigger.
MenubarContent.alignOffsetnumber-4Nudge the content along the alignment axis.
MenubarContent.sideOffsetnumber8Distance in px between trigger and content.
MenubarItem.insetbooleanfalseAdds pl-8 so the item aligns with checkbox / radio items that have a leading indicator.
MenubarItem.disabledbooleanfalseDims the item to opacity-50 and blocks click.
MenubarCheckboxItem.checkedboolean | 'indeterminate'—Controlled checked state. Radix supports the indeterminate mid-state.
MenubarRadioGroup.valuestring—Selected radio value. Pair with onValueChange for controlled use.
MenubarRadioItem.valuestring—Value written when this item is picked.
MenubarShortcutHTMLSpanElement—Simple <span> aligned to the right (ml-auto), text-xs muted. Purely visual — bind the keyboard event yourself.
MenubarSub / MenubarSubTrigger / MenubarSubContentCompound—One level of nested submenu. Keep to a single level per Yuno rule.

When to use

  • Desktop-style app menus for internal tools.
  • Complex screens with grouped commands (rare in Yuno Dashboard).
  • Small standalone editors or admin utilities.

When not to use

  • Marketing sites — use Navigation menu.
  • Mobile-adjacent prototypes — most menubars break down.
  • Dashboard shells — use DropdownMenu on a specific button.

Usage

Do
  • Keep menu labels short (one word if possible).
  • Group related items with MenubarSeparator instead of adding more triggers.
  • Provide MenubarShortcut for high-frequency items.
  • Cap submenus at one level deep (no grandchildren).
Don't
  • Don't nest more than one submenu.
  • Don't put critical actions only here — they must have another entry point.
  • Don't mix Checkbox and Radio inside the same section without a MenubarLabel to separate them.

Related

Cross-links to atoms and patterns you may reach for next.

  • Dropdown menuSame item API, but triggered by a single button instead of a horizontal bar.
  • Navigation menuFor marketing/site nav with hover-menus and rich viewport.
  • CommandFor a searchable palette instead of a persistent bar.
  • Context menuSame items, triggered by right-click on a surface.