shadcn.io is not affiliated with official shadcn/ui
Menubar examples · Standard
Simple Text Menubar for React
A menubar with one File menu of plain text items: New File, Open and Save.
Desktop apps have a menubar across the top; web apps can too. This menubar starts with the smallest version: one File menu with New File, Open and Save as plain text rows. It's the base to add Edit, View, shortcuts and icons to.
Preview
Installation
FAQ
Which parts make up this menubar?
Menubar holds one MenubarMenu, which holds a MenubarTrigger that reads File and a MenubarContent with three MenubarItems.
How do I add Edit beside File?
Add a second MenubarMenu after the first, with its own MenubarTrigger and MenubarContent.
How do I show a keyboard hint on Save?
Add a MenubarShortcut after the label, such as ⌘S. It only prints the hint; bind the key yourself.
Can I operate this menubar from the keyboard?
Yes. Focus File and press Enter, Space or Arrow Down to open it, move with the arrow keys, Enter to choose, and Escape to close.
Should a single File menu be a dropdown?
If it will stay a single menu, a Dropdown Menu on a button is simpler. Use the menubar when more menus will join it.
Related
- Compact MenubarA menubar with a single Options menu
- Application MenubarAn application menubar with File, Edit
- Menubar with ShortcutsAn Edit menu with Undo, Redo, Cut and
- Menubar with IconsA File menu with an icon before New File
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an
- Simple Navigation Navigation MenuA navigation menu with Products and