Skip to content

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

Free

Dropdown with Checkboxes Dropdown Menu for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not hide a real panel for you.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<DropdownMenu>
  <DropdownMenuTrigger :asChild="true">
    <Button variant="outline">
      <SlidersHorizontalIcon aria-hidden="true" data-icon="inline-start" />View
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Appearance</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuCheckboxItem
        :checked="statusBar"
        @checked-change="setStatusBar"
        value="status-bar"
      >
        Status Bar
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        :checked="activityBar"
        @checked-change="setActivityBar"
        value="activity-bar"
      >
        Activity Bar
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem :checked="panel" @checked-change="setPanel" value="panel">
        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, a value, and @checked-change, 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.

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 asChild, checked="statusBar", checked-change="setStatusBar", value="status-bar", checked="activityBar" and checked-change="setActivityBar". The rest is on the Dropdown Menu page.

Button

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

All 30 dropdown menu examples