Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Multi Level

Multi-Level Accordion with Icons for React

An accordion of workspace sections with a category icon on each trigger, whose sections list their guides as nested collapsibles.

Framework
UI library

Two levels in one block: an accordion of workspace sections, each trigger led by an icon, and inside each section a list of guides that open on their own. This React example nests Collapsible rows in AccordionContent, so a guide can open without closing its neighbors. Use it for documentation and admin navigation with categories.

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

Which icons are on the parent rows?

Documents uses FileTextIcon, Projects uses FolderIcon, Workspace settings uses SettingsIcon, and Team members uses UsersIcon. Each is size-4, text-muted-foreground and aria-hidden, in a gap-2 row on AccordionTrigger.

Do the nested guides get those icons too?

No. Each guide is a Collapsible with a ChevronDownIcon on CollapsibleTrigger. The icon uses group-aria-expanded:rotate-180 and duration-200.

How are the guide rows styled?

AccordionContent is p-0. Each Collapsible has border-t and bg-accent, and CollapsibleContent uses ps-6 with text-sm text-muted-foreground.

Why does Documents start open?

defaultValue={["documents"]} opens Documents on first render. The string matches that item's value.

Do the guides start open?

No. Each Collapsible renders closed until its trigger is pressed. Documents starts open, so Uploading files and Sharing a document show as titles.

How do I let several parent sections stay open at once?

One open item is the default. Add multiple to Accordion to let several stay open, and list every item that should start open in the defaultValue array.

All 21 accordion examples