Menubar

Menubar is a persistent horizontal, desktop-style menu bar holding command groups like File, Edit, View…

Triggers are subtle buttons (subtle-pressed background while open). The surface and items share Menu's styles: 32px items, icon, shortcut (secondaryContent), checkbox, radio, label, divider and submenu. While a menu is open, the left / right arrow keys move between menus.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport {  Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator,  MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarLabel,  MenubarSub, MenubarSubTrigger, MenubarSubContent,} from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Checkbox, radio & submenu

On/off states and exclusive choices right in the menu; submenus nest 1 level deep.

Usage

Use it in editors and tools with many grouped commands.
Show shortcuts with secondaryContent so people learn them over time.
Keep the Menubar fixed at the top of the work area.

Don't

Don't use Menubar for website navigation. Use Nav or Tabs.
Don't nest submenus more than 1 level deep.

Props

Prop · Type	Default	Description
Menubar.value / onValueChangestring	Default: —	Open menu (controlled).
MenubarContent.align / sideOffset"start" \| "center" \| "end" / number	Default: "start" / 6	Surface position relative to the trigger.
MenubarItem.icon / secondaryContentReactNode	Default: —	Size 20 icon and a shortcut on the right.
MenubarItem.onSelect / disabled(e: Event) => void / boolean	Default: —	Selection handler / disables the item.
MenubarCheckboxItem.checked / onCheckedChangeboolean	Default: —	On/off (controlled).
MenubarRadioGroup.value / onValueChangestring	Default: —	Exclusive choice.
MenubarSub / MenubarSubTrigger / MenubarSubContent—	Default: —	Submenu; MenubarSubTrigger takes an icon.