# DocsNav

> A docs sidebar drawn from a DocsTree: sections under plain labels, pages and titled groups of pages, the current page marked and scrolled into view, an optional title filter, and a footer for support links.

```ts
import { DocsNav } from "@sdxc/ui/docs";
```

Renders the tree in reading order. A group whose `href` is set links its own page from
its summary, and every group is a native `<details>`, so folding needs no script. Load
`@sdxc/ui/docs/docs-nav-tools` in the browser entry for the scroll-to-current and the filter.

## Examples

```tsx
<DocsNav tree={tree} activePath={url.pathname} />
```

```tsx
<DocsNav tree={tree} activePath={path} filter={{ label: "Filter pages", placeholder: "Filter", noResults: "No page matches" }} footer={<a href="/support">Contact support</a>} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `tree` | `DocsTree` | The pages to list; `tree.label` names the navigation landmark. |
| `activePath` | `string` | The path being read, which marks one link `aria-current="page"`. |
| `filter?` | `{ label: string; placeholder: string; noResults: string }` | A field that filters pages by title, with the line shown when nothing matches. It appears once the page's script loads. |
| `footer?` | `RemixNode` | Drawn under the tree, such as "Contact support" or a status link, flush with the nav's edge; give its links the rows' inline padding (or render them as `Sidebar.MenuLink`s) to line their text up with the pages above. |
| `collapseGroups?` | `boolean` | Folds every group except the ones holding the current page, for a tree whose groups run to hundreds of pages. |
| `prefetch?` | `Sidebar.Prefetch` | When a link prefetches its page. |