# Shadcn Horizontal Nav

> Basic scroll area

- Type: example, free and open source (MIT)
- Component: [Scrollspy](https://reui.io/components/scrollspy.md)
- Page: https://reui.io/components/scrollspy/c-scrollspy-2
- 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-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-scrollspy-2.json
- Uses: Button, Scroll Area, Scrollspy

## Best for

A horizontal row of 5 section buttons above a full width 400px tall panel

## Agent notes

- `nav` ids run `section-6` to `section-10` under labels Section 1 to 5; sections resolve page wide by `getElementById`, so keep ids unique
- The `Scrollspy` row is a flex line with no wrap and its buttons never shrink, so any container narrower than the 5 buttons overflows; let it wrap or scroll

## When not to use

- A narrow column of section links kept beside the content: use [Vertical Nav](https://reui.io/components/scrollspy/c-scrollspy-1.md) (`get_example("c-scrollspy-1")`)
- A bounded panel with overflow but no links that follow the reader: use [Scroll Area](https://reui.io/components/scroll-area.md) (`get_component("scroll-area")`)

## Install

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

## 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.