Project Navigator

Navigation

About

A nested project tree navigator that preserves ancestor paths during live search and supports keyboard expand/collapse. Ideal for sidebars and docs.

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

Code

How Project Navigator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import ProjectNavigator, { ProjectNode } from "@/components/ui/project-navigator";

const defaultItems: ProjectNode[] = [
  {
    id: "north",
    label: "Northstar",
    count: 8,
    children: [
      { id: "north-overview", label: "Overview" },
      {
        id: "north-product",
        label: "Product",
        children: [
          { id: "north-brief", label: "Project brief" },
          { id: "north-research", label: "Research notes" },
          { id: "north-design", label: "Interface direction" },
        ],
      },
      { id: "north-release", label: "Release checklist" },
    ],
  },
  {
    id: "folio",
    label: "Folio",
    count: 4,
    children: [
      { id: "folio-overview", label: "Overview" },
      { id: "folio-brand", label: "Brand system" },
      { id: "folio-web", label: "Web experience" },
    ],
  },
  {
    id: "archive",
    label: "Archive",
    count: 12,
    children: [{ id: "archive-2025", label: "2025 projects" }],
  },
];

export default function ProjectNavigatorDemo() {
  const [active, setActive] = React.useState("north-brief");

  return (
    <div className="w-full bg-background min-h-[460px] flex flex-col items-center justify-center p-4 sm:p-6">
      <ProjectNavigator
        title="Project directory"
        items={defaultItems}
        activeId={active}
        onNavigate={setActive}
      />
    </div>
  );
}