Basic scrollspy
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A vertical rail of 5 section buttons in a 150px column to the left of a 500px tall panel
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
- Section links laid out in one row above the content: use the Scrollspy Horizontal Nav example
- A bounded panel that only needs its own scrollbar, with no links following the content: use the Scroll Area component
- A chat transcript that opens on the newest turn and follows replies as they stream: use the Message Scroller component
- Account pages whose side links swap in one panel at a time, hiding the rest: use the Profile blocks
Agent notes
- Replace
nav, which renders both the button rail and the sections; every section body is an empty 350pxbg-mutedblock - Without
targetRefthe spy tracks nothing and a click only marks its link without scrolling, so always pass one targetRefcan sit on a wrapper around aScrollArea: the spy finds itsscroll-area-viewportslot and tracks and scrolls thathistoryis on by default, so mount and every section change rewrite the URL hash withreplaceState; pass false to leave it alone
https://reui.io/components/scrollspy/c-scrollspy-1.mdget_example("c-scrollspy-1")npx shadcn@latest add @reui/c-scrollspy-1Shadcn Components in Scrollspy Vertical Nav
About Shadcn Scrollspy Vertical Nav
Basic scrollspy. Built by composing Button, Scroll Area, Scrollspy. A free, open source shadcn scrollspy example you can install with npx shadcn@latest add @reui/c-scrollspy-1 and edit as your own code.
What You Can Build With Shadcn Scrollspy Vertical Nav
- Composes Button, Scroll Area, Scrollspy, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-scrollspy-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Scrollspy Examples
- Horizontal Nav Basic scroll area
Related Shadcn Component Categories
Open-source shadcn select components for form selection, settings menus, and filter controls.
Open-source shadcn separator components for content grouping, toolbar dividers, and section breaks.
Open-source shadcn sheet components for slide-over details, side panels, and task flows.
Open-source shadcn sidebar components for app shells, collapsible side navigation, and dashboard layouts.
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Open-source shadcn skeleton components for loading placeholders, perceived performance, and content previews.
Frequently Asked Questions
When should I use Shadcn Scrollspy Vertical Nav?
Use it for a vertical rail of 5 section buttons in a 150px column to the left of a 500px tall panel.
Shadcn Scrollspy as a whole fits:
- 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
For section links laid out in one row above the content, use the Scrollspy Horizontal Nav example. For a bounded panel that only needs its own scrollbar, with no links following the content, use the Scroll Area component. For a chat transcript that opens on the newest turn and follows replies as they stream, use the Message Scroller component. For account pages whose side links swap in one panel at a time, hiding the rest, use the Profile blocks.
How do I install Shadcn Scrollspy Vertical Nav?
Is Shadcn Scrollspy Vertical Nav free to use?
Which components does Shadcn Scrollspy Vertical Nav use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.