Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Sidebar

Minimal Sidebar Group Collapsible for React

A sidebar group with a small uppercase Getting Started label that expands to three links.

Framework
UI library

A sidebar section label that folds its links away. Getting Started is a small uppercase trigger in the muted color, with a small chevron that turns over, and it opens to three links. Use it for docs navigation and settings sidebars.

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

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.

All 23 collapsible examples