Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Menubar with Radio Groups
Menubar component with MenubarRadioGroup and MenubarRadioItem for mutually exclusive Layout view options built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users need to choose one view at a time—Grid, List, or Columns—but not multiple. This React Menubar uses MenubarRadioGroup with MenubarRadioItem components for mutually exclusive selections with radio indicators. Built with shadcn/ui and Radix UI primitives, selecting one option automatically deselects others—perfect for View menus with layout modes, sort orders, theme selection, or any setting where only one choice active at once preventing invalid state combinations.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Menubar with Checkboxes
Independent toggle options with checkboxes
Simple Text Menubar
Basic menubar without interactive items
Application Menubar
Complete menubar with multiple menu types
Menubar with Sections
Organized menu with labeled sections
Radio Group
Radio buttons for form selections
Select Component
Dropdown select for single choice
Questions you might have
React Menubar with Checkboxes
Menubar component with MenubarCheckboxItem for toggleable View options like Show Toolbar and Status Bar built with shadcn/ui
React Menubar with Submenu
Menubar component with MenubarSub nested submenu for Open Recent file list hierarchical organization built with shadcn/ui