A nested project tree navigator that preserves ancestor paths during live search and supports keyboard expand/collapse. Ideal for sidebars and docs.
"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>
);
}