Two-Level Sidebar

Navigation 1

About

A collapsible two-level navigation sidebar with active-item highlighting, expandable sub-items and optional badges, for app or dashboard layouts.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Two-Level Sidebar to your project and fits it to your theme.

Code

How Two-Level Sidebar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SidebarV2, type SidebarV2Item } from "@/components/ui/sidebar-v2";

const items: SidebarV2Item[] = [
  { id: "overview", label: "Overview" },
  {
    id: "projects",
    label: "Projects",
    badge: 4,
    children: [
      { id: "projects-active", label: "Active" },
      { id: "projects-archived", label: "Archived" },
    ],
  },
  {
    id: "team",
    label: "Team",
    children: [
      { id: "team-members", label: "Members" },
      { id: "team-roles", label: "Roles & permissions" },
    ],
  },
  { id: "analytics", label: "Analytics", badge: "New" },
  { id: "settings", label: "Settings" },
];

export default function SidebarV2Demo() {
  return (
    <div className="flex min-h-[420px] w-full items-start justify-center bg-background p-8 text-foreground">
      <SidebarV2 items={items} activeId="projects" title="Workspace" />
    </div>
  );
}