# Nav tree (goodtabs UI)

A nested collapsible tree of links for docs, with chevrons and hairline guides.

## Install

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

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

## Usage

```tsx
import { NavTree } from "@/components/ui/nav-tree"

<NavTree
  activeHref={pathname}
  items={[
    {
      label: "Getting started",
      children: [
        { label: "Introduction", href: "/docs" },
        { label: "Installation", href: "/docs/installation" },
      ],
    },
    { label: "Changelog", href: "/docs/changelog" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ label: string; href?: string; children?: NavTreeItem[]; defaultOpen?: boolean }[]` |  | The tree, any depth. Items with children are branches, the rest are links. |
| activeHref | `string` |  | The current page. Sets aria-current and the active fill, and opens its branches. |
| aria-label | `string` | `"Pages"` | Accessible name of the nav landmark. |

## When to use

- The sidebar of a docs site with sections and pages
- Settings or admin areas with two or three levels
- Any list of links that reads better folded than flat

## When not to use

- For a flat list of up to eight links, plain links are enough
- For file browsers that need arrow key navigation and selection, build a real ARIA tree
- For top level site navigation, use the navbar or mega menu

## Notes for agents

- Server component: pass activeHref from usePathname in a client wrapper or from the page props
- A branch that contains the active href opens on its own; defaultOpen overrides that per branch
- A branch with an href renders a link plus a separate chevron button labelled Toggle, so both are reachable by keyboard
- Rows are 28px and the tree has no width of its own: set it on className, usually w-56 to w-64

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