Skip to content

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

Free

Preferences Dropdown Dropdown Menu for Vue

An editor preferences menu of five checkbox rows, from auto-save and spell check to the minimap.

UI library: Ark UI

Preferences opens five checkbox rows under Editor Preferences: Auto-save, Spell Check, Line Numbers, Word Wrap, and Minimap.

Use it when editor toggles should be one click from the toolbar. The same choices beside the document can be a Switch. In Vue, Ark UI does not keep the ticks across a reload.

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">
      <SettingsIcon aria-hidden="true" data-icon="inline-start" />Preferences
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Editor Preferences</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuCheckboxItem
        :checked="autoSave"
        @checked-change="setAutoSave"
        value="auto-save"
      >
        Auto-save
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        :checked="spellCheck"
        @checked-change="setSpellCheck"
        value="spell-check"
      >
        Spell Check
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        :checked="lineNumbers"
        @checked-change="setLineNumbers"
        value="line-numbers"
      >
        Line Numbers
      </DropdownMenuCheckboxItem>
<!-- The rest of the file is under Installation. -->

FAQ

Which preferences start on?

Auto-save, Spell Check and Word Wrap start checked; Line Numbers and Minimap start off. Each DropdownMenuCheckboxItem takes :checked, a value, and @checked-change, which receives a boolean.

What is Editor Preferences?

The DropdownMenuLabel that names the group, followed by a separator. It isn't a row you can pick.

What does the trigger look like?

An outline Button with a gear icon before the word Preferences. The menu is w-56.

Do these ticks survive closing the menu?

Yes. The checked state lives in the component, not in the menu, so it's the same when the menu reopens. Save it to the user's settings to keep it across reloads.

Can I toggle a preference from the keyboard?

Yes. Arrow keys move between rows, and Enter or Space toggles the highlighted one.

Are the five rows in a group?

Yes. The label, the separator and the five rows sit in one DropdownMenuGroup, so the label names them for screen readers.

API Reference

Dropdown Menu

Sets asChild, checked="autoSave", checked-change="setAutoSave", value="auto-save", checked="spellCheck" and checked-change="setSpellCheck". The rest is on the Dropdown Menu page.

Button

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

All 30 dropdown menu examples