Skip to content

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

Free

Settings Menu Collapsible for Vue

A Preferences menu row with a settings icon that opens to Profile, Notifications, and Privacy.

UI library: Ark UI

Preferences pairs a settings icon with a chevron. It opens, on a muted background, to Profile, Notifications, and Privacy, each with an icon.

Use it in an account menu. If this is the app's main navigation, use a Sidebar. In Vue, Ark UI does not remember that Preferences was open.

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

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible class="w-full max-w-lg overflow-hidden rounded-lg border bg-card">
  <CollapsibleTrigger class="group flex w-full items-center justify-between p-3 font-medium text-sm hover:bg-muted">
    <span class="flex items-center gap-2">
      <SettingsIcon aria-hidden="true" class="size-4" />Preferences
    </span>
    <ChevronDownIcon
      aria-hidden="true"
      class="size-4 transition-transform duration-200 group-aria-expanded:rotate-180"
    />
  </CollapsibleTrigger>
  <CollapsibleContent class="border-t bg-muted/50">
    <nav class="flex flex-col gap-1 p-2">
      <a
        v-for="item in items"
        class="flex items-center gap-2 rounded-md p-2 text-sm hover:bg-background"
        href="#"
        :key="item.label"
      >
        <component :is="item.icon" aria-hidden="true" class="size-4" />{{ item.label }}
      </a>
    </nav>
  </CollapsibleContent>
</Collapsible>

FAQ

What is in the Preferences trigger?

A settings icon and the label at the start, and a chevron at the end, in a justify-between row that tints on hover. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-180 on ChevronDownIcon turns it, eased by transition-transform duration-200.

How is the opened list styled?

CollapsibleContent has border-t bg-muted/50, and the links sit in a nav with flex flex-col gap-1 p-2. Each link turns to the background color on hover, so it lifts off the muted panel.

Are Profile, Notifications, and Privacy buttons?

They're links, anchors with an icon and a label, built from the items list at the top of the file. Point each href at its settings page.

Does the Preferences chevron rotate?

Yes, it turns over while the section is open.

How do I start Preferences open?

Set defaultOpen on Collapsible.

It starts closed.

How do I add another section under Preferences?

Add another Collapsible with its own trigger and links below the first, inside the same bordered box. Each section opens on its own.

API Reference

Collapsible

No extra props in this demo. The rest is on the Collapsible page.

All 23 collapsible examples