Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Menubar with Radio Groups for React

A View menu labeled Layout, with Grid, List and Columns. Grid starts checked, and only one of the three can be on.

View opens a Layout label and three radio rows: Grid, List and Columns. Grid starts checked. Choosing another clears Grid.

Use radio rows when exactly one layout should be active. Checkbox rows fit if several panels can be on at once, as in a Checkbox list. On React, Base UI does not store the layout after a refresh.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Menubar anatomy: trigger, root, item, separator, sub trigger, content

Usage

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup onValueChange={setLayout} value={layout}>
        <MenubarLabel>Layout</MenubarLabel>
        <MenubarRadioItem value="grid">Grid</MenubarRadioItem>
        <MenubarRadioItem value="list">List</MenubarRadioItem>
        <MenubarRadioItem value="columns">Columns</MenubarRadioItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

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.

What opens this menu?

A MenubarTrigger that reads View, in the bar's only MenubarMenu.

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.

Can I change the layout from the keyboard?

Yes. Open View with Enter, Space or Arrow Down, move with the arrow keys, and press Enter or Space to pick a layout.

Is Layout itself a choice?

No. It's a MenubarLabel, first inside the radio group, that names it. It can't be focused or picked.

API Reference

Menubar

Sets onValueChange={setLayout}, value={layout}, value="grid", value="list" and value="columns". The rest is on the Menubar page.

All 10 menubar examples