Sidebar

An app's side navigation: groups of links, sections that open, a sliding current-page highlight, and a collapse to icons.

$ pnpm dlx shadcn@latest add https://dashral.com/r/sidebar.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/sidebar.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/sidebar

Usage

example.tsx

1import Link from "next/link"
2import { CreditCard, LayoutDashboard, Users } from "lucide-react"
3import { Sidebar } from "@/components/dashral/sidebar"
4
5<Sidebar
6  header={<Logo />}
7  items={[
8    { label: "Overview", icon: <LayoutDashboard />, href: "/", active: pathname === "/" },
9    { label: "Customers", icon: <Users />, href: "/customers", badge: 12 },
10    { type: "group", label: "Settings", items: [{ label: "Billing", icon: <CreditCard />, href: "/billing" }] },
11  ]}
12  linkAs={Link}
13/>

Examples

Sections that open

children make a row a section; the one with the current page opens on its own.

Collapsed to icons

defaultCollapsed: names in tooltips, and a section's links in a menu beside it.

API reference

Sidebar

Also takes every prop of <aside>(opens in a new tab).

Prop	Type	Default
`items`	`SidebarItem[]` Required. Links ({ label, icon, href, active, badge, children }), groups ({ type: "group", label, items }) and separators.	—
`header`	`ReactNode` At the top: a logo, a workspace switcher.	—
`footer`	`ReactNode` At the bottom: the signed-in user, a help link.	—
`collapsed / defaultCollapsed / onCollapsedChange`	`boolean` Narrowed to its icons. Controlled, or initial with the toggle changing it.	`false`
`collapsible`	`boolean` The collapse toggle at the bottom.	`true`
`linkAs`	`ElementType` Your router's link, for items with href.	`"a"`
`aria-label`	`string` Names the navigation (translated by default).	`"Navigation"`
`classNames`	`{ header, nav, footer, item }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

SidebarLink

= { label: string; icon?: ReactNode; href?: string; onSelect?: () => void; active?: boolean; badge?: ReactNode; disabled?: boolean; children?: SidebarLink[]; defaultOpen?: boolean }

Keyboard

Keys	Action
`Tab`	Move between the links
`Enter`or`Space`	Follow a link, or open and close a section

Accessibility

A <nav> landmark, named by aria-label.
The current page is aria-current="page"; a section's row is a button with aria-expanded, and a closed section is inert.
Collapsed, every link keeps its name (and shows it in a tooltip); a section's row opens its links in a menu.

Motion

The current page's highlight slides to it (--duration-considered); collapsing narrows the width and sections open on their height in CSS.