Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Multi Level

Multi-Level Accordion with Left Plus Trigger for React

An accordion of help center topics with a plus/minus toggle at the start of each trigger, whose sections list their articles as nested collapsibles.

Framework
UI library

A help center in two levels, with the toggle first. Each topic's trigger starts with a plus that turns into a minus, and inside it the articles are Collapsible rows with their own chevrons that open independently. Use this React example for file-tree-like navigation and knowledge bases.

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 does the plus end up before the parent title?

The plus and minus sit in a relative size-4 box, the first child of a gap-3 row, with the title after it in flex-1 text-start. **:data-[slot=accordion-trigger-icon]:hidden hides the built-in chevron. group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200, and both icons are aria-hidden.

What toggles an article?

Each article is a Collapsible inside AccordionContent. Its ChevronDownIcon sits on CollapsibleTrigger and uses group-aria-expanded:rotate-180 with duration-200.

How are the article 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 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 trigger is pressed. Account starts open, so Changing your email and Resetting your password 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