Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Menubar examples · Standard

Application Menubar for React

An application menubar with File, Edit and View menus, separators between command groups and a shortcut on each common command.

Framework
UI library

A desktop-style web app needs more than one menu: File, Edit and View across the top, each with its own commands. This menubar puts three MenubarMenus side by side, with MenubarShortcut hints on the file and clipboard commands and separators between groups. It fits editors, design tools and any app that mirrors a desktop program.

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 menus are on this bar?

File (New File, Open, Save), Edit (Undo, Redo, Cut, Copy, Paste) and View (Toggle Fullscreen, Zoom In, Zoom Out). Each is a MenubarMenu with a MenubarTrigger and a MenubarContent.

Which rows show a keyboard hint?

Every File and Edit row: New File ⌘N, Open ⌘O, Save ⌘S, Undo ⌘Z, Redo ⇧⌘Z, Cut ⌘X, Copy ⌘C and Paste ⌘V. The View rows have none.

Where do the separators sit?

A MenubarSeparator before Save in File, between Redo and Cut in Edit, and after Toggle Fullscreen in View, splitting each menu into related commands.

Do those shortcut hints fire the command?

No. MenubarShortcut only prints the text. Register the keys on the page so they work while every menu is closed, and run the same command the row runs.

How do I move across File, Edit, and View?

Enter, Space or Arrow Down opens the focused menu, the arrow keys move through its rows, and Escape closes it and returns focus to its trigger. Arrow Left and Arrow Right move between the triggers, and Tab leaves the bar.

Should these menus be one dropdown?

No. Three menus of related commands read better side by side, the way desktop apps lay them out. Use a Dropdown Menu when there's only one list of actions.

All 10 menubar examples