# Side navigation

> Side navigation for documentation, with collapsible groups and one named landmark. On small screens it becomes a drawer.

Facade UI item `nav-side` (block, section).
Docs page: https://facadeui.dev/components/nav-side · Registry JSON: https://facadeui.dev/r/nav-side.json

## Install

```bash
npx shadcn@latest add @facade/nav-side
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/nav-side.json`. The CLI also installs what it needs: @base-ui-components/react@1.0.0-rc.0, lucide-react@^1.47.0, @facade/button, @facade/heading, @facade/types, @facade/utils.

Files: `components/sections/nav-side.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/nav-side-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { NavSide } from "@/components/sections/nav-side"

const groups = [
  {
    title: "Getting started",
    links: [
      { label: "Installation", href: "#installation" },
      { label: "Theming", href: "#theming" },
      { label: "Accessibility", href: "#accessibility" },
    ],
  },
  {
    title: "Atoms",
    collapsible: true,
    links: [
      { label: "Button", href: "#button" },
      { label: "Badge", href: "#badge" },
      { label: "Input", href: "#input" },
    ],
  },
  {
    title: "Sections",
    collapsible: true,
    defaultCollapsed: true,
    links: [
      { label: "Hero", href: "#hero" },
      { label: "Feature grid", href: "#feature-grid" },
      { label: "FAQ", href: "#faq" },
    ],
  },
]

export function Demo() {
  return (
    <div className="grid gap-8 lg:grid-cols-[16rem_minmax(0,1fr)]">
      <NavSide label="Documentation" groups={groups} currentPath="#theming" />
      <div className="text-muted-foreground text-sm">
        Below <code>lg</code> the sidebar collapses to a drawer. The group holding the
        current page is always expanded, even when it is marked{" "}
        <code>defaultCollapsed</code>.
      </div>
    </div>
  )
}
```

## Props

### NavSideProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `groups` (required) | `NavSideGroup[]` |  |  |
| `label` | `string` | `"Section"` | Names the landmark, e.g. "Documentation". |
| `currentPath` | `string` |  |  |
| `link` | `LinkComponent` |  |  |
| `headingLevel` | `HeadingLevel` | `2` | Heading level of the group headings. Defaults to `2`. |
| `children` | `ReactNode` |  | Shown above the groups, such as a version switcher or a search button. |
| `stickyTop` | `string` | `"5rem"` | Top offset of the sticky sidebar, so it clears a fixed header. |
| `className` | `string` |  |  |
| `id` | `string` |  |  |