shadcn.io is not affiliated with official shadcn/ui
Menubar examples · Standard
Menubar with Submenu for React
A File menu with an Open Recent submenu listing three recent documents.
Recent files belong one level down, out of the way of New and Save. This menubar's File menu has New File and Save, with an Open Recent submenu in between that lists Document 1.txt, Document 2.txt and Document 3.txt. It fits editors and document apps.
Preview
Installation
FAQ
How is Open Recent nested?
MenubarSub wraps a MenubarSubTrigger that reads Open Recent and a MenubarSubContent with the documents. The submenu opens beside its trigger and flips to the other side when there's no room.
Where does the arrow on Open Recent come from?
MenubarSubTrigger draws the chevron at the end of the row itself; the demo adds no icon.
What are the rows inside the submenu?
Document 1.txt, Document 2.txt and Document 3.txt, as plain MenubarItems.
Related
- Simple Text MenubarA menubar with one File menu of plain
- Application MenubarAn application menubar with File, Edit
- Menubar with SectionsAn Edit menu in two labeled sections
- Nested Dropdown Dropdown MenuA New menu with Document and Folder on
- Multi-Level Nested AccordionAn accordion of help center topics where
- Compact MenubarA menubar with a single Options menu