Skip to content

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

Free

Minimal Sidebar Group Collapsible for React

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

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 React, Base UI does not remember which group was open.

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

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible className="w-full max-w-lg">
  <CollapsibleTrigger className="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"
      className="size-3 transition-transform duration-200 group-aria-expanded:rotate-180"
    />
  </CollapsibleTrigger>
  <CollapsibleContent>
    <nav className="mt-1 flex flex-col gap-1">
      {links.map((link) => (
        <a
          className="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