# Sidebar 01 - Classic Admin Sidebar

> Navigate dashboards with a clean vertical sidebar featuring grouped links for dashboards, pages, apps, and settings. Includes branding, a collapsible layout, and a promotional upgrade card for building scalable admin interfaces.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/sidebar-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/sidebar-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/sidebar-01-light-76b3e064f4fa111f.png
- Registry item: https://shadcndashboard.dev/r/sidebar-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/sidebar-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `sidebar`, `scroll-area`, `card`, `button`

## Files

### `src/components/shadcn-dashboard/blocks/sidebar/sidebar-01/page.tsx`

```tsx
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/shadcn-dashboard/blocks/sidebar/sidebar-01/app-sidebar";

const Page = () => {
  return (
    <SidebarProvider>
      <AppSidebar />
      {/* ---------------- Main ---------------- */}
      <div className="flex flex-1 flex-col">
        <header className="sticky top-0 z-50 flex h-14 items-center border-b px-4">
          <SidebarTrigger className="cursor-pointer"/>
        </header>
        <main className="flex-1 p-4" />
      </div>
    </SidebarProvider>
  );
};

export default Page;
```

### `src/components/shadcn-dashboard/blocks/sidebar/sidebar-01/app-sidebar.tsx`

```tsx
"use client";

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import {
  NavItem,
  NavMain,
} from "@/components/shadcn-dashboard/blocks/sidebar/sidebar-01/nav-main";
import {
  PieChart,
  CircleUserRound,
  ClipboardList,
  Notebook,
  NotepadText,
  Table,
  Ticket,
  Settings,
  Bell,
  BookOpen,
  Rocket,
  LifeBuoy,
} from "lucide-react";

export const navData: NavItem[] = [
  // Dashboards Section
  { label: "Dashboards", isSection: true },
  { title: "Analytics", icon: PieChart, href: "#" },
  { title: "CRM Dashboard", icon: ClipboardList, href: "#" },

  // Pages Section
  { label: "Pages", isSection: true },
  { title: "Tables", icon: Table, href: "#" },
  { title: "Forms", icon: NotepadText, href: "#" },
  { title: "User Profile", icon: CircleUserRound, href: "#" },

  // Apps Section
  { label: "Apps", isSection: true },
  { title: "Notes", icon: Notebook, href: "#" },
  { title: "Tickets", icon: Ticket, href: "#" },
  { title: "Documentation", icon: BookOpen, href: "#" },

  // Settings Section
  { label: "Settings", isSection: true },
  { title: "Notifications", icon: Bell, href: "#" },
  { title: "Preferences", icon: Settings, href: "#" },
];

const navItems = [
  {
    title: "Help Center",
    url: "/theme-pages/faq",
    icon: LifeBuoy,
  },
  {
    title: "Documentation",
    url: "#",
    icon: BookOpen,
  },
]

export function AppSidebar() {
  return (
    <Sidebar className="px-0 h-full **:data-[slot=sidebar-inner]:h-full **:data-[slot=sidebar-inner]:bg-background">
      <div className="flex flex-col gap-4">
        {/* ---------------- Header ---------------- */}
        <SidebarHeader className="px-4 py-3">
          <SidebarMenu>
            <SidebarMenuItem>
              <a href="#" className="w-full h-full">
                <img
                  src="https://images.shadcnspace.com/assets/shadcn-dashboard/logo/fulldark-logo.svg"
                  alt="fulldark-logo"
                  width={100}
                  height={32}
                  className="block dark:hidden"
                />
                <img
                  src="https://images.shadcnspace.com/assets/shadcn-dashboard/logo/fullwhite-logo.svg"
                  alt="fulldark-logo"
                  width={100}
                  height={32}
                  className="hidden dark:block"
                />
              </a>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarHeader>

        {/* ---------------- Content ---------------- */}
        <SidebarContent className="overflow-hidden">
          <ScrollArea className="h-[calc(100vh-100px)]">
            <div className="px-4">
              <NavMain items={navData} />
            </div>
            {/* card */}
            <div className="pt-5 px-4">
              <div className="-mx-4 border-t border-b border-border px-5 py-5">
                <div className="flex flex-col gap-5">
                  {/* Plan info */}
                  <div className="flex flex-col gap-2">
                    <div className="flex flex-col gap-4">
                      {/* Header row */}
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Rocket className="size-5 shrink-0" />
                          <span className="font-medium text-base leading-6 text-foreground">Basic Plan</span>
                        </div>
                        <span className="font-medium text-base leading-6 text-foreground">70%</span>
                      </div>
                      {/* Progress bar */}
                      <div className="w-full h-1.5 rounded-full overflow-hidden">
                        <Progress value={70} className="h-full" />
                      </div>
                    </div>
                    {/* Usage text */}
                    <p className="text-sm font-normal leading-5 text-muted-foreground text-center">
                      68/100 monthly limit used
                    </p>
                  </div>
                  {/* Upgrade button */}
                  <Button className="w-full cursor-pointer h-9 text-sm font-medium">
                    Upgrade
                  </Button>
                </div>
              </div>
              <SidebarGroup className="mt-auto pt-4 pb-0 px-0">
                <SidebarGroupContent>
                  <SidebarMenu className=" ">
                    {navItems.map((item) => (
                      <SidebarMenuItem key={item.title}>
                        <SidebarMenuButton size="lg" className="h-full cursor-pointer">
                          <a href={item.url}>
                            <div className="flex items-center gap-3 w-full">
                              <item.icon className="shadow-none size-5 shrink-0" />
                              <div className="flex flex-col flex-1 text-left text-sm leading-tight hide-menu whitespace-nowrap">
                                <span className="truncate font-medium">{item.title}</span>
                              </div>
                            </div>
                          </a>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            </div>
          </ScrollArea>
        </SidebarContent>
      </div>
    </Sidebar>
  );
}
```

### `src/components/shadcn-dashboard/blocks/sidebar/sidebar-01/nav-main.tsx`

```tsx
"use client";

import * as React from "react";
import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";

export type NavItem = {
  label?: string;
  isSection?: boolean;
  title?: string;
  icon?: LucideIcon;
  href?: string;
};

export function NavMain({ items }: { items: NavItem[] }) {
  const [activeItem, setActiveItem] = React.useState<string | null>(
    items.find((i) => !i.isSection)?.title || null
  );

  return (
    <>
      {items.map((item, index) => (
        <NavMainItem
          key={item.title || item.label || index}
          item={item}
          activeItem={activeItem}
          setActiveItem={setActiveItem}
        />
      ))}
    </>
  );
}

function NavMainItem({
  item,
  activeItem,
  setActiveItem,
}: {
  item: NavItem;
  activeItem: string | null;
  setActiveItem: (val: string) => void;
}) {
  const isActive = activeItem === item.title;

  // Section label
  if (item.isSection && item.label) {
    return (
      <SidebarGroup className="p-0 pt-5 first:pt-0">
        <SidebarGroupLabel className="p-0 text-xs font-medium uppercase text-sidebar-foreground">
          {item.label}
        </SidebarGroupLabel>
      </SidebarGroup>
    );
  }

  if (item.title) {
    return (
      <SidebarGroup className="p-0">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              id={`nav-main-button-${item.title.toLowerCase().replace(/\s+/g, "-")}`}
              tooltip={item.title}
              isActive={isActive}
              onClick={() => setActiveItem(item.title!)}
              className={cn(
                "text-sm font-medium px-3 py-2 h-9 transition-colors cursor-pointer hover:bg-primary/5",
                isActive ? "bg-primary! text-primary-foreground!" : ""
              )}
              render={<a href={item.href} />}
            >
              {item.icon && <item.icon />}
              <span className="truncate group-data-[collapsible=icon]:hidden">
                {item.title}
              </span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    );
  }

  return null;
}
```