Sidebar

A collapsible sidebar navigation with icon support, active state highlighting, and animated collapse toggle.

Preview

Installation

npx shadcn@latest add @shadszn/sidebar

Files Installed

sidebar/sidebar.tsx -- Sidebar component

Key Features

Collapsible with animated chevron toggle (64px collapsed, 256px expanded)
Active link highlighting with lavender background
Icon + label layout, icons remain visible when collapsed
Optional header slot for branding
Scrollable nav area for long item lists

Usage

"use client"

import { useState } from "react"
import { Home, Settings, Users } from "lucide-react"
import { Sidebar } from "@/components/blocks/sidebar"

export default function AppLayout({ children }) {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <div className="flex h-screen">
      <Sidebar
        collapsed={collapsed}
        onToggle={() => setCollapsed(!collapsed)}
        header={<span className="font-bold text-lg">MyApp</span>}
        items={[
          { href: "/", label: "Home", icon: <Home className="w-4 h-4" />, active: true },
          { href: "/team", label: "Team", icon: <Users className="w-4 h-4" /> },
          { href: "/settings", label: "Settings", icon: <Settings className="w-4 h-4" /> },
        ]}
      />
      <main className="flex-1 overflow-auto">{children}</main>
    </div>
  )
}

Props

Prop	Type	Default	Description
items	SidebarItem[]	[]	Array of { href, label, icon?, active? } navigation items.
collapsed	boolean	false	Whether the sidebar is in collapsed (icon-only) mode.
onToggle	() => void	---	Callback when the collapse toggle is clicked.
header	ReactNode	---	Content displayed in the header area (hidden when collapsed).
className	string	---	Additional CSS classes for the aside element.