Dashboard Navigation

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

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" },
    ],
  },
];

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 },
];

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 },
];

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://

​When to use

​Usage

​Key features

​Customization

​Troubleshooting

When to use

Usage

Key features

Customization

Troubleshooting