Skip to content

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

Free

Dropdown with Checkboxes Dropdown Menu for React

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

View opens Status Bar, Activity Bar, and Panel as separate checkbox rows under Appearance. The button always reads View. The checks are only inside the menu.

Use it when several panels can be on together and should stay out of the toolbar. A choice that stays on the page can be a Switch. In React, Base UI does not hide a real panel for you.

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

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    <SlidersHorizontalIcon aria-hidden="true" data-icon="inline-start" />
    View
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Appearance</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuCheckboxItem
        checked={statusBar}
        onCheckedChange={setStatusBar}
      >
        Status Bar
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        checked={activityBar}
        onCheckedChange={setActivityBar}
      >
        Activity Bar
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem checked={panel} onCheckedChange={setPanel}>
        Panel
      </DropdownMenuCheckboxItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

FAQ

Which rows start checked?

Status Bar starts checked; Activity Bar and Panel start off. Each row toggles on its own. Each DropdownMenuCheckboxItem takes checked and onCheckedChange, which receives a boolean.

Does the View button show which bars are on?

No. It always reads View, after a sliders icon. The checks inside the menu are the only place the state shows.

What wraps the label and the rows?

One DropdownMenuGroup holds the Appearance DropdownMenuLabel, a separator and the three rows, so the label names the group for screen readers.

What is the View button?

An outline Button with a sliders icon before the word View. DropdownMenuTrigger renders the button through render, and the icon and word go inside the trigger.

How wide is the menu?

w-56, set with className on the menu's content part.

Can I toggle these from the keyboard?

Yes. Arrow keys move between the rows and Enter or Space toggles the highlighted one. Escape closes the menu and returns focus to the button.

API Reference

Dropdown Menu

Sets checked={statusBar}, onCheckedChange={setStatusBar}, checked={activityBar}, onCheckedChange={setActivityBar}, checked={panel} and onCheckedChange={setPanel}. The rest is on the Dropdown Menu page.

Button

Sets variant="outline". The rest is on the Button page.

All 30 dropdown menu examples