Skip to content
garn

Menubar

A desktop-style horizontal bar of pull-down menus.

Stablev0.4.2added in v0.1.0@garn/ui/menubar
On this page

Default

File and Edit menus with items and shortcuts.

Installation

garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.

terminal
npx garn-ui add menubar
First time? Set up garn in your project
Registry
menubar
Deps
@radix-ui/react-menubarlucide-react
Registry deps
utils

Import

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

Anatomy

The parts this component is built from — compose them to assemble it.

MenubarRequired[data-slot="menubar"]

The persistent bar (role=menubar); owns which menu is open.

MenubarMenuRequired

One top-level menu within the bar.

MenubarTriggerRequired[data-slot="menubar-trigger"]

The top-level label that opens its menu.

MenubarContentRequired[data-slot="menubar-content"]

The portaled pull-down for a menu.

MenubarItem[data-slot="menubar-item"]

An action item; inset for alignment.

MenubarCheckboxItem[data-slot="menubar-checkbox-item"]

A toggleable item (controlled via checked + onCheckedChange).

MenubarRadioGroup

Groups radio items; owns the selected value.

MenubarRadioItem[data-slot="menubar-radio-item"]

A single-select item inside a RadioGroup.

MenubarLabel[data-slot="menubar-label"]

A non-interactive section heading; inset for alignment.

MenubarSeparator[data-slot="menubar-separator"]

Divider between groups.

MenubarShortcut[data-slot="menubar-shortcut"]

Right-aligned shortcut hint (display only).

MenubarSub

A submenu container (Sub / SubTrigger / SubContent).

MenubarSubTrigger[data-slot="menubar-sub-trigger"]

Opens a submenu; inset for alignment.

MenubarSubContent[data-slot="menubar-sub-content"]

The nested submenu surface.

Props

The component's public props and their types.

No component-specific props — this is a thin wrapper over its native element.

Styling

Target these data-slots and states, and remap these tokens, to restyle without forking the component.

[data-slot="menubar"]

States

SelectorState
[data-state=open]menu-open
[data-highlighted]item-highlighted
[data-disabled]item-disabled
PropertyTokenTier
barHeight--garn-control-h-mdsemantic · air
menuGap--garn-gap-inlinesemantic · air
itemMinHeight--garn-control-h-mdsemantic · air

When to use

A persistent application menu bar (File / Edit / View …) for a desktop-like app or editor.

Reach for something else when

  • Website navigation (use navigation-menu or plain links)
  • a single button-triggered menu (use dropdown-menu)
  • a few actions (use a button group).

Overview

Menubar is the persistent application menu bar — File / Edit / View … — for a desktop-like app or editor. Menubar is the bar (role=menubar), each MenubarMenu a top-level menu with its MenubarTrigger label and portaled MenubarContent pull-down of items. It's a specialized pattern for command-dense, desktop-style apps; for a single button menu use DropdownMenu, and for website navigation use NavigationMenu.

Guidelines

Reserve the menubar for genuinely app-like surfaces. It belongs in editors and tools with many grouped commands; on a typical website it's the wrong metaphor (use NavigationMenu) and a single overflow menu is a DropdownMenu. Use the conventional menu names where they apply (File/Edit/View).

Organize commands the way users expect. Group related actions, separate sections, and surface shortcut hints with MenubarShortcut (display-only — bind the keys yourself). Keep destructive items distinct and avoid burying frequent actions deep.

Honor the full keyboard model. Arrow keys move across the bar and within a menu, Esc closes, and roving focus follows APG — don't break it. Once one menu is open, hovering the others should open them, matching desktop behavior.

Best practices

Do
  • Reserve it for app-style command organization; keep top-level labels short.
  • Group and separate items; show shortcuts with MenubarShortcut (and bind them).
  • Control checkbox/radio item state.
Don't
  • Don't use a menubar for site navigation.
  • Don't overload it with rarely-used commands.
  • Don't rely on MenubarShortcut to bind keys.

Content guidelines

  • Use the conventional top-level names (File, Edit, View) and verb-first item labels.
  • Keep wording consistent with the rest of the app; show shortcuts as hints.

Troubleshooting

Reaching for a menubar to build a website's top nav.

Cause. Menubar is the app-menu (File/Edit/View) pattern, not site navigation.

Fix. Use navigation-menu (or a nav + links) for site navigation; reserve menubar for app commands.

Accessibility

Role
menubar
ARIA APG
menubar
Focus
Roving focus across the bar and into open menus.

Keyboard

ArrowLeftArrowRightMove between top-level menus.
ArrowDownEnterSpaceOpen the focused menu.
ArrowUpArrowDownMove between items in an open menu.
EscapeClose the open menu.
HomeEndJump to the first / last item.
A1.3.1Info and RelationshipsA2.1.1KeyboardA4.1.2Name, Role, Value
  • The bar is role=menubar with roving focus; each menu is role=menu, items are menuitem / checkbox / radio.
  • Show real shortcuts with MenubarShortcut and actually bind the keys yourself (the hint is display only).