# Nav TOC Scrollspy

Sticky table of contents sidebar for documentation with active section highlight.

- id: `nav-toc-scrollspy`
- Page: https://agentic-ui-kit.com/components/nav-toc-scrollspy
- Live preview: https://agentic-ui-kit.com/live/component/nav-toc-scrollspy?piece=nav-toc-scrollspy

## Install

```bash
agentic-ui add nav-toc-scrollspy
npx shadcn@4.17.0 add @agentic-ui/nav-toc-scrollspy
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** heading-discovery, sticky-contents, scrollspy, intersection-observer, smooth-scroll, focus-heading, hash-update, reduced-motion, dark-mode
- **Intents:** navigate, explore-detail
- **Suits domains:** knowledge, marketing, devtools, saas, support
- **Interaction:** scroll, click, keyboard-focus
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** sticky table of contents sidebar for documentation with active section highlight, on this page navigation built from h2 and h3 headings with scrollspy, article outline that follows the scroll position using IntersectionObserver, docs page right rail contents list with smooth scroll that respects reduced motion
- **Avoid when:** short pages with fewer than three sections, site-wide navigation (use a sidebar or header navigation), step-by-step flows: use a stepper
- **Preserve when adapting:** observer-reading-line, heading-focus-after-click, reduced-motion-jump
- **Replace when adapting:** scope, levels, offset, title
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Registry dependencies:** lib-primitives