Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Menubar examples · Standard

Menubar with Shortcuts for React

An Edit menu with Undo, Redo, Cut and Copy, each showing its keyboard shortcut.

Framework
UI library

Shortcuts only help if people can find them. This menubar's Edit menu shows ⌘Z, ⇧⌘Z, ⌘X and ⌘C next to Undo, Redo, Cut and Copy, so the menu teaches the keys. It fits editors and productivity apps.

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

Which hints does this Edit menu show?

Undo ⌘Z, Redo ⇧⌘Z, Cut ⌘X and Copy ⌘C, each in a MenubarShortcut at the end of its row.

Do these hints register the keys?

No. MenubarShortcut only prints the text. Listen for the keys on the page and run the same command the row runs, so they work while the menu is closed. Show Ctrl instead of ⌘ on Windows and Linux.

What is the menu structure?

One MenubarMenu with a MenubarTrigger that reads Edit and a MenubarContent of four MenubarItems, each holding its label and a MenubarShortcut.

How do I add Paste with a hint?

Add a fifth MenubarItem with the label Paste followed by a MenubarShortcut with ⌘V.

Can I reach these items from the keyboard?

Yes. Open Edit with Enter, Space or Arrow Down, move with the arrow keys, and press Enter to run a command.

What order are the commands in?

Undo, Redo, Cut, then Copy, with no separators.

All 10 menubar examples