Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Multi Level

Multi-Level Nested Accordion for React

An accordion of help center topics where each open section lists its articles as collapsibles that expand on their own.

Framework
UI library

Some content has two levels: topics, and articles within them. This React example puts Collapsible rows inside each AccordionContent, so a topic opens to a list of articles that each open on their own, with a chevron that turns over. One topic is open at a time; any number of articles can be. Use it for help centers and documentation.

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

Why are the articles a Collapsible?

Each article is a Collapsible inside AccordionContent, with its own CollapsibleTrigger. The parent rows stay an Accordion, so each level toggles on its own.

How does an article chevron rotate?

The CollapsibleTrigger has className="group". Its ChevronDownIcon uses group-aria-expanded:rotate-180 and duration-200, with opacity-60 and aria-hidden.

How are the article rows styled?

AccordionContent is p-0, so the rows run to the item edges. Each Collapsible has border-t and bg-accent, and CollapsibleContent uses ps-6 with text-sm text-muted-foreground.

Why does Account start open?

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

Do the articles start open?

No. Each Collapsible renders closed until its own trigger is pressed. Opening Account shows the article 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