shadcn.io is not affiliated with official shadcn/ui
Menubar examples · Standard
Menubar with Radio Groups for React
A View menu with a Layout choice where exactly one of Grid, List or Columns is checked.
A view is a grid, a list or columns, never two at once. This menubar's View menu holds a Layout label and Grid, List and Columns as radio rows, with Grid checked to start. It fits file browsers, galleries and dashboards with switchable layouts.
Preview
Installation
FAQ
How does the layout choice stay selected?
The layout is one value, grid to start, kept in the component, so the check is still on it when View reopens.
MenubarRadioGroup takes value, and onValueChange receives the new value. Each MenubarRadioItem has its value.
What happens when I choose List?
The value becomes list, the check moves from Grid to List, and the menu closes. Switch your view where the value changes.
How do I add a command that is not a layout?
Put a MenubarSeparator after the radio group, then a plain MenubarItem, such as Refresh. It runs an action and doesn't take part in the choice.
Related
- Menubar with CheckboxesA View menu of checkbox rows that show or
- Menubar with SectionsAn Edit menu in two labeled sections
- Simple Text MenubarA menubar with one File menu of plain
- Dropdown with Radio Items Dropdown MenuA panel position picker where exactly one
- Basic Radio GroupA vertical radio group of three options
- Application MenubarAn application menubar with File, Edit