Skip to main content
Locations:
  • sabo/src/components/dashboard/nav-main.tsx
  • sabo/src/components/dashboard/nav-secondary.tsx
  • sabo/src/components/dashboard/nav-user.tsx
  • sabo/src/components/dashboard/nav-projects.tsx

​
When to use

  • Build structured menus grouped by purpose (main vs secondary vs user vs projects).

​
Usage

These components are used inside app-sidebar.tsx:
src/components/dashboard/app-sidebar.tsx
import { NavMain } from "@/components/dashboard/nav-main";
import { NavSecondary } from "@/components/dashboard/nav-secondary";
import { NavUser } from "@/components/dashboard/nav-user";

export function AppSidebar() {
  return (
    <Sidebar>
      <SidebarContent>
        <NavMain items={navMain} />
        <NavSecondary items={navSecondary} />
      </SidebarContent>
      <SidebarFooter>
        <NavUser />
      </SidebarFooter>
    </Sidebar>
  );
}

​
Key features

  • NavMain: Collapsible navigation with icons and nested sub-items
  • NavSecondary: Simple link list for support/feedback type links
  • NavUser: User profile dropdown in sidebar footer
  • NavProjects: Project/workspace quick switcher

​
Customization

1

Configure nav-main items

Edit the items prop in app-sidebar.tsx. Each item supports:
  • title - Display text
  • url - Target route
  • icon - Lucide React icon component
  • isActive - Whether to highlight (computed from pathname)
  • items - Array of sub-items for collapsible menus
const navMain = [
  {
    title: "Settings",
    url: "/dashboard/settings",
    icon: Settings2,
    isActive: pathname.startsWith("/dashboard/settings"),
    items: [
      { title: "General", url: "/dashboard/settings/general" },
      { title: "Account", url: "/dashboard/settings/account" },
    ],
  },
];
2

Add nav-secondary links

Simple flat links for support, feedback, or external resources:
const navSecondary = [
  { title: "Support", url: "/support", icon: LifeBuoy },
  { title: "Feedback", url: "/feedback", icon: Send },
];
3

Wire nav-projects

Quick links to projects or workspaces:
const projects = [
  { name: "Project Alpha", url: "/dashboard/project/alpha", icon: Frame },
  { name: "Project Beta", url: "/dashboard/project/beta", icon: PieChart },
];
4

Handle external links

For external URLs (e.g., docs, changelog), use full https:// URLs. The nav components will detect and render them with appropriate target="_blank" attributes.

​
Troubleshooting

  • Sub-items not showing
    • Ensure parent item has items array populated
  • Active state not working
    • Check isActive is computed correctly using usePathname()
  • External links opening in same tab
    • Verify URL starts with http:// or https://