Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Menubar examples · Standard

Menubar with Sections for React

An Edit menu in two labeled sections, Actions with Cut, Copy and Paste, and History with Undo and Redo.

Framework
UI library

Clipboard and history commands blur together in one long list. This menubar's Edit menu splits them into two labeled sections, Actions (Cut, Copy, Paste) and History (Undo, Redo), with a separator between them. It fits editors with full Edit menus.

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

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.

All 10 menubar examples