Sidebar

App navigation from data: header, groups (optionally foldable), badges and pinned footer entries. Collapses to an icon rail on a spring (⌘B / Ctrl+B) with labels kept for assistive tech; below md it is a left drawer.

npx @kznlabs/labsui add sidebar

Guild admin

Overview

Press ⌘B or the panel button to collapse the sidebar to an icon rail.

"use client";import { Home, Inbox, Settings } from "lucide-react";import { usePathname } from "next/navigation";import {  Sidebar,  SidebarLayout,  SidebarTrigger,} from "@/components/ui/sidebar";const groups = [  {    label: "Server",    items: [      { label: "Overview", href: "/", icon: <Home /> },      { label: "Inbox", href: "/inbox", icon: <Inbox />, badge: 12 },    ],  },];export function AdminLayout({ children }: { children: React.ReactNode }) {  return (    <SidebarLayout className="h-dvh">      <Sidebar        label="Admin"        groups={groups}        footer={[{ label: "Settings", href: "/settings", icon: <Settings /> }]}        current={usePathname()}      />      <main className="min-w-0 flex-1">        <SidebarTrigger />        {children}      </main>    </SidebarLayout>  );}

<Sidebar>

Navigation sidebar from data. Collapses to an icon rail on a spring; labels clip but stay in the a11y tree.

groups*
SidebarGroup[]
The navigation, top to bottom.
current
string
Id of the current item: highlighted, aria-current="page" on links.
footer
SidebarItem[]
Entries pinned to the bottom, e.g. settings.
header
ReactNode
Top slot, e.g. the workspace name.
labeldefault "Sidebar"
string
Accessible name for the navigation landmark.
onSelect
(id: string) => void
Called with an item's id when it is picked (links too, e.g. for client routing).

Prop	Type	Default
`groups*` The navigation, top to bottom.	`SidebarGroup[]`	—
`current` Id of the current item: highlighted, `aria-current="page"` on links.	`string`	—
`footer` Entries pinned to the bottom, e.g. settings.	`SidebarItem[]`	—
`header` Top slot, e.g. the workspace name.	`ReactNode`	—
`label` Accessible name for the navigation landmark.	`string`	`"Sidebar"`
`onSelect` Called with an item's id when it is picked (links too, e.g. for client routing).	`(id: string) => void`	—

<SidebarLayout>

Lays the sidebar and the page side by side and holds the rail state. Below md, the sidebar is a left drawer.

collapsed
boolean
Controlled rail state; pair with onCollapsedChange.
defaultCollapseddefault false
boolean
Start as the icon rail (uncontrolled).
onCollapsedChange
(collapsed: boolean) => void
Called from the trigger or the shortcut.
shortcutdefault true
boolean
Toggle with ⌘B / Ctrl+B (default: true). Ignored while typing in a field.

Prop	Type	Default
`collapsed` Controlled rail state; pair with `onCollapsedChange`.	`boolean`	—
`defaultCollapsed` Start as the icon rail (uncontrolled).	`boolean`	`false`
`onCollapsedChange` Called from the trigger or the shortcut.	`(collapsed: boolean) => void`	—
`shortcut` Toggle with ⌘B / Ctrl+B (default: true). Ignored while typing in a field.	`boolean`	`true`

Also accepts every <div> prop.

<SidebarTrigger>

type SidebarItem: { id?: string; label: string; icon?: ReactNode; href?: string; badge?: ReactNode; }
type SidebarGroup: { label?: string; items: SidebarItem[]; collapsible?: boolean; defaultOpen?: boolean; }

* required. Every component also takes className.