Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Sidebar

Sidebar with Counts Collapsible for React

An Inbox sidebar item with a count badge that expands to Unread and Starred links with their own counts.

Framework
UI library

A sidebar folder that shows its count before it opens. Inbox carries a secondary badge with 12, and opens to Unread and Starred links, each with an outline count, indented beside a start-edge line. Use it for mail, tickets or any folder with unread items.

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 badge is 12, and which are 8 and 4?

12 is a secondary Badge at the end of the Inbox trigger. 8 and 4 are outline badges at the end of the Unread and Starred links.

What is the line beside Unread and Starred?

The links' nav has ms-6 border-s ps-3: a start border that follows the page direction, indented to sit under the Inbox label.

Do Unread and Starred expand too?

No. They're links, built from the folders list at the top of the file. Only Inbox is a trigger.

Does 12 get announced with Inbox?

Yes. The badge is inside the trigger, so the name is Inbox 12. Add visually hidden text, such as unread, if the number needs explaining.

Does ChevronRight turn when Inbox opens?

Yes, a quarter turn to point down. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-90 on ChevronRightIcon turns it, eased by transition-transform duration-200.

How do I show a different count?

Change the number in the Inbox badge and the count values in the folders list. In an app, compute them from your data.

All 23 collapsible examples