> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboard Navigation

> Main, secondary, user, and projects navigation blocks used in the sidebar.

**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`:

```tsx src/components/dashboard/app-sidebar.tsx theme={null}
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

<Steps>
  <Step title="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

    ```tsx theme={null}
    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" },
        ],
      },
    ];
    ```
  </Step>

  <Step title="Add nav-secondary links">
    Simple flat links for support, feedback, or external resources:

    ```tsx theme={null}
    const navSecondary = [
      { title: "Support", url: "/support", icon: LifeBuoy },
      { title: "Feedback", url: "/feedback", icon: Send },
    ];
    ```
  </Step>

  <Step title="Wire nav-projects">
    Quick links to projects or workspaces:

    ```tsx theme={null}
    const projects = [
      { name: "Project Alpha", url: "/dashboard/project/alpha", icon: Frame },
      { name: "Project Beta", url: "/dashboard/project/beta", icon: PieChart },
    ];
    ```
  </Step>

  <Step title="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.
  </Step>
</Steps>

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