Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Nested Sidebar Items Collapsible for React

A two-level sidebar where Documentation opens to Components, which opens to Button and Input.

Documentation opens to Components, which opens to Button and Input. Each level has a chevron that points down, and the inner list is indented.

Use it for a small docs tree. A large tree with selection belongs in a Tree View. In React, Base UI opens each level on its own.

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

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible className="w-full max-w-lg">
  <CollapsibleTrigger className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 font-medium text-sm hover:bg-muted">
    <ChevronRightIcon
      aria-hidden="true"
      className="size-4 transition-transform duration-200 group-aria-expanded:rotate-90"
    />
    Documentation
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="ms-2 mt-1 border-s-2 ps-2">
      <Collapsible>
        <CollapsibleTrigger className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted">
          <ChevronRightIcon
            aria-hidden="true"
            className="size-3 transition-transform duration-200 group-aria-expanded:rotate-90"
          />
          Components
        </CollapsibleTrigger>
        <CollapsibleContent>
          <nav className="ms-4 mt-1 flex flex-col gap-1">
            {components.map((component) => (
              <a
                className="flex items-center gap-2 rounded-md px-2 py-1 text-sm hover:bg-muted"
                href="#"
                key={component}
              >
                <CircleIcon
                  aria-hidden="true"
                  className="size-1.5 fill-current"
                />
                {component}
{/* The rest of the file is under Installation. */}

FAQ

How are the two levels nested?

The inner Collapsible sits inside the outer CollapsibleContent. Each one opens and closes on its own, so Components keeps its state while Documentation is closed.

What draws the line beside Components?

The outer CollapsibleContent has ms-2 border-s-2 ps-2: a start border that follows the page direction, with Components indented past it.

Which icon does each row use?

The two triggers use ChevronRightIcon, size-4 for Documentation and size-3 for Components. The links use a filled CircleIcon at size-1.5 as a bullet. All are aria-hidden.

Do the chevrons turn when a level opens?

Yes, a quarter turn to point down. Each trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-90 on its chevron turns it.

How do I start a level open?

Set defaultOpen on that level's Collapsible.

Both levels start closed.

When should this outline be a Tree View?

For a short static outline, nested collapsibles are enough: each trigger is its own button, and Tab moves between them. When people select items or expect arrow keys to move through the tree, use a Tree View.

API Reference

Collapsible

No extra props in this demo. The rest is on the Collapsible page.

All 23 collapsible examples