Navigation

Dashboard navigation is configured in one place:

src/config/navigation.ts

The same configuration powers the expanded sidebar, collapsed desktop navigation, mobile menu, breadcrumbs, and command search.

Add a page

Create the route inside the dashboard route group, then add its navigation item:

// app/(dashboard)/reports/page.tsx
export default function ReportsPage() {
  return <div>{/* Reports content */}</div>;
}

// src/config/navigation.ts
{
  title: "Reports",
  href: "/reports",
  icon: BarChart3Icon,
}

Place the item in the appropriate navigation section. Import its icon from lucide-react and make sure the href matches the route.

Nested navigation

Use children when several related pages should appear under one collapsible item:

{
  title: "Reports",
  icon: BarChart3Icon,
  children: [
    { title: "Revenue", href: "/reports/revenue", icon: TrendingUpIcon },
    { title: "Customers", href: "/reports/customers", icon: UsersIcon },
  ],
}

Route highlighting and parent active states are handled by the shared navigation system.