Docs

Organisms

Sidebar

Collapsible application side navigation bar and panel container.

8 examplesComposite ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Sidebar } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Collapsible rail variant

Toggle between full 264px navigation mode and compact 64px icon rail mode.

Collapsible rail variant rendered preview

Collapsible Rail Preview

Click the collapse toggle button or the sidebar header button to switch between full 264px navigation mode and compact 64px icon rail mode.

Current Sidebar Mode

Expanded Mode (264px)

Icon-only rail mode

Compact icon rail for dense monitoring suites and IDE layouts.

Icon-only rail mode rendered preview

Compact Icon Rail

Minimalist 64px vertical icon navigation rail designed for dense monitoring suites and IDE layouts.

Mobile Sheet drawer

Responsive mobile navigation drawer powered by Sheet.

Mobile Sheet drawer rendered preview

Mobile Drawer Integration

Click hamburger button to trigger Sheet drawer.

User & team workspace

Sidebar with team member badges and governance section.

User & team workspace rendered preview

Full application shell

Complete responsive SaaS shell with top bar, mobile fallback drawer, and content grid.

Full application shell rendered preview

Overview Dashboard

Total Revenue

$128,450.00

+18.4% this quarter

Active Subscriptions

4,892

99.99% SLA Uptime

System Load

24.8%

Optimal capacity
Full Application Shell Architecture

This composed layout demonstrates a complete production shell containing a collapsible desktop sidebar, a mobile Sheet navigation drawer fallback, header search and actions, and a responsive main analytics region.

Overview

Sidebar is a collapsible, responsive application navigation shell. It supports workspace switcher headers with brand logos, multi-section menu groups, Lucide item icons, active route indicators, notification badge counts, collapsible rail animation (w-64 to w-16), and bottom user profile footer cards.

Usage Examples

### Basic Application Sidebar

tsx
import { Sidebar } from "@quinkit/ui";
import { LayoutDashboard, BarChart3, Users, Settings, Sparkles } from "lucide-react";

export function SidebarDemo() {
  return (
    <Sidebar
      brandTitle="Quinkit Admin"
      brandSubtitle="Enterprise Cloud Suite"
      brandIcon={Sparkles}
      sections={[
        {
          label: "Main Platform",
          items: [
            { label: "Dashboard", href: "#", active: true, icon: LayoutDashboard },
            { label: "Analytics", href: "#", icon: BarChart3, badge: "Live" },
            { label: "Team Members", href: "#", icon: Users }
          ]
        },
        {
          label: "Administration",
          items: [
            { label: "Workspace Settings", href: "#", icon: Settings }
          ]
        }
      ]}
      user={{
        name: "Elena Rostova",
        email: "elena@quinkit.ui",
        role: "Admin",
        avatarFallback: "ER"
      }}
    />
  );
}

### Collapsible Rail Variant

tsx
import { useState } from "react";
import { Sidebar } from "@quinkit/ui";
import { LayoutDashboard, FolderKanban, Settings } from "lucide-react";

export function CollapsibleSidebarDemo() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Sidebar
      collapsed={collapsed}
      onCollapseChange={setCollapsed}
      brandTitle="Acme Engineering"
      sections={[
        {
          label: "Workspace Overview",
          items: [
            { label: "Dashboard", href: "#", active: true, icon: LayoutDashboard },
            { label: "Pipelines", href: "#", icon: FolderKanban, badge: "4" },
            { label: "Settings", href: "#", icon: Settings }
          ]
        }
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
sectionsSidebarSection[]**Required**Navigation section groups containing items with optional icons, badges, and active states.
collapsedbooleanundefinedControlled rail collapse state.
defaultCollapsedbooleanfalseInitial rail collapse state for uncontrolled usage.
onCollapseChange(collapsed: boolean) => voidundefinedCallback fired when collapse state toggles.
brandTitlestring"Quinkit Workspace"Main workspace header title.
brandSubtitlestring"Enterprise Tier"Subtitle or tier text shown below brand title.
brandIconComponentTypeundefinedLucide or SVG icon for header logo.
userSidebarUserundefinedUser profile object { name, email, avatarUrl, avatarFallback, role } rendered in footer.
hideTogglebooleanfalseHide header collapse button.
classNamestringundefinedAdditional container class names.

Accessibility Details

  • Semantic HTML layout using native <aside> and <nav> elements.
  • Active items announce aria-current="page" to screen readers.
  • Rail toggle button includes dynamic aria-label ("Expand sidebar" / "Collapse sidebar").
  • Reduced motion support preserves visual state changes without jarring animations.

Accessibility & Keyboard

Sidebar adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/sidebar.json