Collapsible Sidebar
An app sidebar that collapses to an icon rail; labels fade, a marker slides to the active item, icons get tooltips.
collapsible-sidebar.tsxcollapsible-sidebar.css
Checking access…
Overview
Toggle and the sidebar narrows to icons while labels fade out; widening brings them back. A marker slides to the active item in both states.
A nested section expands in place when open. In the rail, hovering an icon shows its label as a tooltip.
When to use
- Dashboards and app shells with 4–10 top-level sections.
When not to use
- Marketing sites: use a top nav.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/collapsible-sidebar.json$
npx shadcn@latest add https://sundaeui.dev/r/collapsible-sidebar.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/collapsible-sidebar.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/collapsible-sidebar.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy collapsible-sidebar.tsx and collapsible-sidebar.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { CollapsibleSidebar } from '@/components/sundae/collapsible-sidebar'
<CollapsibleSidebar />Props
| Prop | Type | Default |
|---|---|---|
items*Nav items. | { id: string; label: string; icon: ReactNode; count?: number; children?: { id: string; label: string }[] }[] | — |
collapsed / defaultCollapsedRail state. | boolean | false |
onNavigateCalled on click. | (id: string) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A nav landmark; the toggle has aria-expanded. In the rail, items keep their accessible names.
- The active item has aria-current="page".
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-csb; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Collapsible Sidebar free?
- Collapsible Sidebar is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Collapsible Sidebar?
- Run npx shadcn@latest add https://sundaeui.dev/r/collapsible-sidebar.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Collapsible Sidebar support keyboard and screen readers?
- A nav landmark; the toggle has aria-expanded. In the rail, items keep their accessible names. The active item has aria-current="page".
- Does Collapsible Sidebar respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All navigation →- Pro
File Tree
Navigation · Refined Vertical Tabs
Navigation · Refined- Pro
Nav Dropdown
Navigation · Refined Bottom Tab Bar
Navigation · Refined- Pro
Command Palette
Navigation · Refined Pagination
Navigation · Refined