# Shadcn Vertical Nav

> Basic scrollspy

- Type: example, free and open source (MIT)
- Component: [Scrollspy](https://reui.io/components/scrollspy.md)
- Page: https://reui.io/components/scrollspy/c-scrollspy-1
- Docs (Base UI): https://reui.io/docs/components/base/scrollspy.md
- Docs (Radix UI): https://reui.io/docs/components/radix/scrollspy.md
- MCP: `get_example("c-scrollspy-1")`
- Registry item: https://reui.io/r/styles/base-nova/c-scrollspy-1.json
- Uses: Button, Scroll Area, Scrollspy

## Best for

A vertical rail of 5 section buttons in a 150px column to the left of a 500px tall panel

## Agent notes

- Replace `nav`, which renders both the button rail and the sections; every section body is an empty 350px `bg-muted` block

## When not to use

- Section links laid out in one row above the content: use [Horizontal Nav](https://reui.io/components/scrollspy/c-scrollspy-2.md) (`get_example("c-scrollspy-2")`)

## Install

```bash
npx shadcn@latest add @reui/c-scrollspy-1
```

## About Shadcn Scrollspy

### When to use

- A table of contents that marks which section of a long scrolling panel is in view
- Jump links that scroll their content to the chosen section and keep that link highlighted

### When not to use

- A bounded panel that only needs its own scrollbar, with no links following the content: use [Scroll Area](https://reui.io/components/scroll-area.md) (`get_component("scroll-area")`)
- A chat transcript that opens on the newest turn and follows replies as they stream: use [Message Scroller](https://reui.io/components/message-scroller.md) (`get_component("message-scroller")`)
- Account pages whose side links swap in one panel at a time, hiding the rest: use the [Profile blocks](https://reui.io/blocks/application/profile.md)

### Agent notes

- Without `targetRef` the spy tracks nothing and a click only marks its link without scrolling, so always pass one
- `targetRef` can sit on a wrapper around a `ScrollArea`: the spy finds its `scroll-area-viewport` slot and tracks and scrolls that
- `history` is on by default, so mount and every section change rewrite the URL hash with `replaceState`; pass false to leave it alone

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.