Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Menubar with Submenu
Menubar component with MenubarSub nested submenu for Open Recent file list hierarchical organization built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
File menus often have too many items—Open, Open Recent, Open From Cloud—but Recent needs its own submenu. This React Menubar uses MenubarSub with MenubarSubTrigger and MenubarSubContent for nested hierarchical menus. Built with shadcn/ui and Radix UI primitives, hovering Open Recent reveals submenu with recent documents—perfect for File menus, hierarchical settings, nested categories, or any menu where grouping related actions into submenus reduces clutter without hiding functionality.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Text Menubar
Basic menubar without nested structure
Application Menubar
Complete menubar with multiple menus
Menubar with Sections
Menu organized with labeled sections
Dropdown with Submenu
Nested dropdown menu structure
Navigation with Submenu
Site navigation with nested items
Multi-level Accordion
Nested collapsible content
Questions you might have
React Menubar with Radio Groups
Menubar component with MenubarRadioGroup and MenubarRadioItem for mutually exclusive Layout view options built with shadcn/ui
React Menubar with Destructive Action
Menubar component with destructive variant MenubarItem for dangerous Delete action visually separated with red styling built with shadcn/ui