# Sidebar nav (goodtabs UI)

Sidebar links in sections with an eyebrow heading, optional icons and mono counts.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/sidebar-nav.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/sidebar-nav`

## Usage

```tsx
import { SidebarNav } from "@/components/ui/sidebar-nav"

<SidebarNav
  width="16rem"
  sections={[
    {
      title: "Library",
      items: [
        { label: "Inspiration", href: "/inspiration", count: 128 },
        { label: "Components", href: "/components", count: 64, active: true },
      ],
    },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| sections | `{ title?: string; items: { label: string; href: string; icon?: ReactNode; count?: number | string; active?: boolean }[] }[]` |  | Sections in order. A section without a title is a flat list. |
| width | `string` |  | CSS width, for example "16rem". Fills its container by default. |

## When to use

- The left column of an app or docs site with up to a few dozen links
- When links group into named sections and some carry a count
- Wherever the current page should read as a quiet filled row, not an accent bar

## When not to use

- For switching views inside one page, use vertical-tabs or underline-tabs
- For a top-of-page header with a handful of links, use the navbar
- For nested trees that expand and collapse: it is flat sections only

## Notes for agents

- Server component with next/link, so pass real hrefs and set active yourself from the pathname
- Items are 32px, rounded-sm, text-muted-foreground; hover and active are a bg-muted fill, with aria-current on the active link
- It has no border or padding of its own: wrap it in your sidebar column, or in a rounded-lg border box for demos
- The count takes any number or string and is read as "n items"; icons should be 16px lucide icons

Docs: https://ui.goodtabs.co/components/sidebar-nav