shadcn.io is not affiliated with official shadcn/ui
Menubar examples · Standard
Menubar with Icons for React
A File menu with an icon before New File, Open and Save.
Framework
UI library
Icons let people find a command without reading every row. This menubar's File menu puts a file, folder and save icon before New File, Open and Save. It fits editors and any app where the same commands are used often.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
Where does each icon go?
First inside each MenubarItem, before the label. The item lays them out with a gap.
What size are these icons?
The item sizes them; the demo sets no size class. Add one, such as size-4, only to change it.
Which menu is this?
A single MenubarMenu whose MenubarTrigger reads File, with New File, Open and Save in its MenubarContent.
How do I add a hint beside Save?
Add a MenubarShortcut after the label, such as ⌘S. It lines up at the end of the row and only prints the hint.
Related
- Simple Text MenubarA menubar with one File menu of plain
- Menubar with ShortcutsAn Edit menu with Undo, Redo, Cut and
- Application MenubarAn application menubar with File, Edit
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an
- Accordion with Category IconsAn accordion of workspace sections, each
- Compact MenubarA menubar with a single Options menu