Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Menubar with Sections for React

An Edit menu split into Actions (Cut, Copy, Paste) and History (Undo, Redo), with a label on each section.

Edit opens two labeled groups. Actions lists Cut, Copy and Paste. A separator, then History lists Undo and Redo. The labels are not commands.

Group commands under labels when a menu mixes two jobs, such as editing and history. A Dropdown Menu can use the same groups off one button. In React, Base UI does not run Undo or Redo.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Menubar anatomy: trigger, root, item, separator, sub trigger, content

Usage

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarLabel>Actions</MenubarLabel>
        <MenubarItem>Cut</MenubarItem>
        <MenubarItem>Copy</MenubarItem>
        <MenubarItem>Paste</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarLabel>History</MenubarLabel>
        <MenubarItem>Undo</MenubarItem>
        <MenubarItem>Redo</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

FAQ

How are Actions and History split?

Each section is a MenubarGroup that starts with its MenubarLabel, with a MenubarSeparator between the two groups.

Is the section label a command?

No. A MenubarLabel names its group; nothing happens when you click it.

What does the separator separate?

The Actions group from the History group: Paste above the line, the History label below it.

What opens this menu?

A MenubarTrigger that reads Edit, in the bar's only MenubarMenu.

Do the labels take keyboard focus?

No. The arrow keys move from Paste straight to Undo, skipping the separator and the History label. Screen readers use each label to name its group.

How do I show a shortcut on Undo?

Put a MenubarShortcut after the label inside the Undo item, such as ⌘Z. It only prints the hint.

API Reference

Menubar

No extra props in this demo. The rest is on the Menubar page.

All 10 menubar examples