Skip to content

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

Free

Minimal Sidebar Group Collapsible for Vue

A sidebar Getting Started label that opens to Introduction, Installation, and Quick Start.

UI library: Ark UI

Getting Started is a small uppercase label with a chevron. It opens to Introduction, Installation, and Quick Start.

Use it for a short docs group. For the app's main navigation, use a Sidebar. In Vue, Ark UI does not remember which group 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">
  <CollapsibleTrigger class="group flex w-full items-center justify-between px-2 py-1 font-semibold text-muted-foreground text-xs uppercase tracking-wider hover:text-foreground">
    Getting Started<ChevronDownIcon aria-hidden="true" class="size-3 transition-transform duration-200 group-aria-expanded:rotate-180" />
  </CollapsibleTrigger>
  <CollapsibleContent>
    <nav class="mt-1 flex flex-col gap-1">
      <a
        v-for="link in links"
        class="rounded-md px-2 py-1.5 text-sm hover:bg-muted"
        href="#"
        :key="link"
      >
        {{ link }}
      </a>
    </nav>
  </CollapsibleContent>
</Collapsible>

FAQ

How is the Getting Started label styled?

The trigger is font-semibold text-xs uppercase tracking-wider in text-muted-foreground, and turns to the foreground color on hover.

Are Introduction, Installation, and Quick Start links?

Yes. They're anchors in a nav, with rounded-md px-2 py-1.5 text-sm and a muted hover fill. Point each href at its page.

What spaces the three rows?

The nav is mt-1 flex flex-col gap-1, so the links sit a step below the label with a small gap between them.

Does the small chevron rotate?

Yes. 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. It's size-3, to match the small label.

How do I start Getting Started open?

Set defaultOpen on Collapsible.

This group starts closed.

What can the keyboard reach in this group?

Tab reaches the Getting Started trigger, and Space or Enter toggles it. Once open, Tab moves on through the three links.

API Reference

Collapsible

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

All 23 collapsible examples