Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Standard

Dropdown with Checkboxes Dropdown Menu for React

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

Framework
UI library

View toggles buried in a settings page are toggles nobody finds. This dropdown menu opens from a View button and lists Status Bar, Activity Bar and Panel as checkbox rows under an Appearance label, each with its own on or off state. It fits editors, IDE-style apps and dashboards with panels to hide.

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

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.

All 30 dropdown menu examples