Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Sidebar

Settings Menu Collapsible for React

A Preferences menu with a settings icon that expands to Profile, Notifications and Privacy links.

Framework
UI library

A settings section that opens to its pages. The Preferences trigger pairs a settings icon with its label and a chevron, and the content, on a muted background, lists Profile, Notifications and Privacy with their icons. Use it in account menus 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

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.

All 23 collapsible examples