Grouped App Sidebar
Brand header, search trigger, labelled link groups and a user row, with each group announced as a list and the active link marked aria-current.
Nested Accordion Sidebar
Groups that fold open to child pages, starting with the group that owns the current page already open and every aria-controls resolving.
195 lineslucide-react
- sidebar
- accordion
- nested
- disclosure
- tree
What's included
components/sidebar-nested-accordion.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add sidebar-nested-accordion
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
Your page content goes here
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/sidebar-nested-accordion.tsx
'use client'
/**
* <SidebarNestedAccordion> — a sidebar whose groups fold open to reveal child
* pages, with the group holding the current page open on first paint.
*
* - Each group header is a real `<button>` with `aria-expanded` and an
* `aria-controls` that always resolves. The child list stays mounted and is
* hidden with the `hidden` attribute, so the IDREF never points at nothing.
* - Opening the group that owns the current page by default is the whole
* point: a nested nav that starts fully shut hides where you are.
* - The chevron is a single downward icon rotated with a class. A left/right
* pair would need an RTL flip; a rotation that means "closed" reads the
* same in either direction.
* - Child links draw their indent as a rail on the logical start edge
* (`border-s`, `ms-`), so the tree hangs from the correct side in RTL.
*/
import * as React from 'react'
import { ChevronDown, Package, Users, ReceiptText, Cog } from 'lucide-react'
export interface AccordionChild {
id: string
label: string
}
export interface AccordionGroup {
id: string
label: string
icon: React.ReactNode
children: AccordionChild[]
}
export interface SidebarNestedAccordionProps {
groups?: AccordionGroup[]
defaultActiveId?: string
/** Let several groups stay open at once. Off means opening one closes the rest. */
multiple?: boolean
children?: React.ReactNode
className?: string
}
const icon = 'h-4 w-4 shrink-0'
const DEFAULT_GROUPS: AccordionGroup[] = [
{
id: 'catalog',
label: 'Catalog',
icon: <Package aria-hidden className={icon} />,
children: [
{ id: 'products', label: 'Products' },
{ id: 'collections', label: 'Collections' },
{ id: 'inventory', label: 'Inventory' },
],
},
{
id: 'customers',
label: 'Customers',
icon: <Users aria-hidden className={icon} />,
children: [
{ id: 'all-customers', label: 'All customers' },
{ id: 'segments', label: 'Segments' },
{ id: 'reviews', label: 'Reviews' },
],
},
{
id: 'finance',
label: 'Finance',
icon: <ReceiptText aria-hidden className={icon} />,
children: [
{ id: 'payouts', label: 'Payouts' },
{ id: 'invoices', label: 'Invoices' },
{ id: 'tax', label: 'Tax settings' },
],
},
{
id: 'system',
label: 'System',
icon: <Cog aria-hidden className={icon} />,
children: [
{ id: 'webhooks', label: 'Webhooks' },
{ id: 'api-keys', label: 'API keys' },
],
},
]
export function SidebarNestedAccordion({
groups = DEFAULT_GROUPS,
defaultActiveId = 'segments',
multiple = false,
children,
className = '',
}: SidebarNestedAccordionProps) {
const uid = React.useId()
const [activeId, setActiveId] = React.useState(defaultActiveId)
const [open, setOpen] = React.useState<Set<string>>(
() => new Set(groups.filter((g) => g.children.some((c) => c.id === defaultActiveId)).map((g) => g.id)),
)
const toggle = (id: string) => {
setOpen((prev) => {
const next = new Set(multiple ? prev : [])
if (prev.has(id)) next.delete(id)
else next.add(id)
return next
})
}
return (
<div
className={`flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ${className}`}
>
<aside
aria-label="Application"
className="flex w-[256px] shrink-0 flex-col border-e border-border/60 bg-card/40"
>
<div className="flex h-14 items-center gap-2 px-4">
<span
aria-hidden
className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-xs font-bold text-primary-foreground"
>
S
</span>
<span className="text-sm font-semibold tracking-tight">Storefront</span>
</div>
<nav aria-label="Main" className="flex-1 space-y-1 overflow-y-auto px-3 pb-4">
{groups.map((group) => {
const expanded = open.has(group.id)
const owns = group.children.some((c) => c.id === activeId)
return (
<div key={group.id}>
<button
type="button"
aria-expanded={expanded}
aria-controls={`${uid}-${group.id}`}
onClick={() => toggle(group.id)}
className={`flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
owns ? 'text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
}`}
>
{group.icon}
<span className="flex-1 truncate text-start">{group.label}</span>
<ChevronDown
aria-hidden
className={`h-4 w-4 shrink-0 transition-transform motion-reduce:transition-none ${
expanded ? '' : '-rotate-90 rtl:rotate-90'
}`}
/>
</button>
<ul
id={`${uid}-${group.id}`}
hidden={!expanded}
className="ms-6 mt-0.5 space-y-0.5 border-s border-border/60 ps-2"
>
{group.children.map((child) => {
const active = child.id === activeId
return (
<li key={child.id}>
<a
href="#"
aria-current={active ? 'page' : undefined}
onClick={(e) => {
e.preventDefault()
setActiveId(child.id)
}}
className={`block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
active
? 'bg-primary/10 font-medium text-primary'
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
}`}
>
{child.label}
</a>
</li>
)
})}
</ul>
</div>
)
})}
</nav>
</aside>
<main className="hidden min-w-0 flex-1 p-6 sm:block">
{children ?? (
<div className="flex min-h-full min-w-0 items-center justify-center break-words rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">
Your page content goes here
</div>
)}
</main>
</div>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Install: npm i lucide-react
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/sidebar-nested-accordion.tsx and import it where you need the section:
import { SidebarNestedAccordion } from '@/components/sidebar-nested-accordion'Customize
2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.
Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
groups | AccordionGroup[] | DEFAULT_GROUPS |
defaultActiveId | string | 'segments' |
multipleLet several groups stay open at once. Off means opening one closes the rest. | boolean | false |
children | React.ReactNode | — |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.
sidebar-nested-accordion.html
<!--
Nested Accordion Sidebar — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block is interactive in React and the handlers are NOT here.
Buttons, toggles and menus render in their initial state and do
nothing until you wire them up.
-->
<div class="flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ">
<aside aria-label="Application" class="flex w-[256px] shrink-0 flex-col border-e border-border/60 bg-card/40">
<div class="flex h-14 items-center gap-2 px-4">
<span aria-hidden="true" class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-xs font-bold text-primary-foreground">S</span>
<span class="text-sm font-semibold tracking-tight">Storefront</span>
</div>
<nav aria-label="Main" class="flex-1 space-y-1 overflow-y-auto px-3 pb-4">
<div>
<button type="button" aria-expanded="false" aria-controls="_R_0_-catalog" class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package h-4 w-4 shrink-0" aria-hidden="true">
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path>
<path d="M12 22V12"></path>
<polyline points="3.29 7 12 12 20.71 7"></polyline>
<path d="m7.5 4.27 9 5.15"></path>
</svg>
<span class="flex-1 truncate text-start">Catalog</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform motion-reduce:transition-none -rotate-90 rtl:rotate-90" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<ul id="_R_0_-catalog" hidden="" class="ms-6 mt-0.5 space-y-0.5 border-s border-border/60 ps-2">
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Products</a>
</li>
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Collections</a>
</li>
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Inventory</a>
</li>
</ul>
</div>
<div>
<button type="button" aria-expanded="true" aria-controls="_R_0_-customers" class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 shrink-0" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
<span class="flex-1 truncate text-start">Customers</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform motion-reduce:transition-none" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<ul id="_R_0_-customers" class="ms-6 mt-0.5 space-y-0.5 border-s border-border/60 ps-2">
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">All customers</a>
</li>
<li>
<a href="#" aria-current="page" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary bg-primary/10 font-medium text-primary">Segments</a>
</li>
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Reviews</a>
</li>
</ul>
</div>
<div>
<button type="button" aria-expanded="false" aria-controls="_R_0_-finance" class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-receipt-text h-4 w-4 shrink-0" aria-hidden="true">
<path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"></path>
<path d="M14 8H8"></path>
<path d="M16 12H8"></path>
<path d="M13 16H8"></path>
</svg>
<span class="flex-1 truncate text-start">Finance</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform motion-reduce:transition-none -rotate-90 rtl:rotate-90" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<ul id="_R_0_-finance" hidden="" class="ms-6 mt-0.5 space-y-0.5 border-s border-border/60 ps-2">
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Payouts</a>
</li>
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Invoices</a>
</li>
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Tax settings</a>
</li>
</ul>
</div>
<div>
<button type="button" aria-expanded="false" aria-controls="_R_0_-system" class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cog h-4 w-4 shrink-0" aria-hidden="true">
<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
<path d="M12 2v2"></path>
<path d="M12 22v-2"></path>
<path d="m17 20.66-1-1.73"></path>
<path d="M11 10.27 7 3.34"></path>
<path d="m20.66 17-1.73-1"></path>
<path d="m3.34 7 1.73 1"></path>
<path d="M14 12h8"></path>
<path d="M2 12h2"></path>
<path d="m20.66 7-1.73 1"></path>
<path d="m3.34 17 1.73-1"></path>
<path d="m17 3.34-1 1.73"></path>
<path d="m11 13.73-4 6.93"></path>
</svg>
<span class="flex-1 truncate text-start">System</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform motion-reduce:transition-none -rotate-90 rtl:rotate-90" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<ul id="_R_0_-system" hidden="" class="ms-6 mt-0.5 space-y-0.5 border-s border-border/60 ps-2">
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">Webhooks</a>
</li>
<li>
<a href="#" class="block truncate rounded-lg px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">API keys</a>
</li>
</ul>
</div>
</nav>
</aside>
<main class="hidden min-w-0 flex-1 p-6 sm:block">
<div class="flex min-h-full min-w-0 items-center justify-center break-words rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">Your page content goes here</div>
</main>
</div>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
10 more blocks in Sidebars
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse SidebarsShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Sidebars blocks
View categoryCollapsible Icon-Rail Sidebar
Folds between a full list and an icon rail without losing any accessible names, with a Ctrl/Cmd+B shortcut and tooltips that show on keyboard focus too.
Rail Plus Secondary Panel
A narrow rail of labelled sections beside a panel that lists the pages inside the chosen one, for products with more destinations than one list can hold.
Sidebar With Workspace Switcher
A header that opens a real menu of workspaces: arrow keys, Home/End, Escape returning focus to the trigger, and checked state announced as a radio choice.
Floating Inset Sidebar
A floating card on a tinted canvas beside an inset content surface, with a labelled usage meter and an upgrade card that is one skippable Tab stop.
Resizable Sidebar With Splitter
A drag handle that is also a keyboard-operable separator, with arrow keys that swap in RTL, pointer capture for touch and pen, and double-click to reset.
Docs Sidebar With Filter
Version picker, a labelled filter that announces its match count, and sections that vanish rather than leave a heading over an empty list.
Chat History Sidebar
Conversations grouped by recency with a per-row pin toggle that announces itself, and a hover control that stays reachable by keyboard and on touch.
Mail Folders Sidebar
Compose button, folders whose unread counts are spoken, colour labels that never rely on colour alone, and a storage meter with a text warning.
File Explorer Tree Sidebar
A real ARIA tree with roving focus, arrow-key expand and collapse, type-ahead and one tab stop, drawn flat so a screen reader is told the structure.