Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Menubar examples · Standard

Menubar with Checkboxes for React

A View menu of checkbox rows that show or hide the toolbar, sidebar and status bar.

Framework
UI library

View menus let people show and hide parts of the interface. This menubar's View menu holds Show Toolbar, Show Sidebar and Show Status Bar as MenubarCheckboxItem rows, each with its own check. It fits editors, design tools and any app with panels to toggle.

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

FAQ

How do these View checkboxes stay checked?

Show Toolbar and Show Status Bar start checked and Show Sidebar starts off. The state lives in the component, so the checks are still there the next time View opens. Each MenubarCheckboxItem takes checked and onCheckedChange, which receives a boolean.

Where do the checkboxes sit?

In one MenubarMenu: the MenubarTrigger reads View, and its MenubarContent holds a MenubarGroup with the three rows.

Can more than one of these be on?

Yes. Each row keeps its own state. Use MenubarRadioGroup when only one option may be on.

How do I toggle a row from the keyboard?

Open View with Enter, Space or Arrow Down, move to the row with the arrow keys, and press Enter or Space to toggle it.

How do I name this set of toggles?

Put a MenubarLabel first inside the MenubarGroup, above the rows. It names the group and can't be focused.

What order are the rows in?

Show Toolbar, Show Sidebar, then Show Status Bar. Sidebar is the one that starts unchecked.

All 10 menubar examples