Basic scroll area
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A horizontal row of 5 section buttons above a full width 400px 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
- A narrow column of section links kept beside the content: use the Scrollspy Vertical Nav example
- A bounded panel with overflow but no links that follow the reader: 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
navids runsection-6tosection-10under labels Section 1 to 5; sections resolve page wide bygetElementById, so keep ids unique- The
Scrollspyrow 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 - 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-2.mdget_example("c-scrollspy-2")npx shadcn@latest add @reui/c-scrollspy-2Shadcn Components in Scrollspy Horizontal Nav
About Shadcn Scrollspy Horizontal Nav
Basic scroll area. 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-2 and edit as your own code.
What You Can Build With Shadcn Scrollspy Horizontal 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-2
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Scrollspy Examples
- Vertical Nav Basic scrollspy
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 Horizontal Nav?
Use it for a horizontal row of 5 section buttons above a full width 400px 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 a narrow column of section links kept beside the content, use the Scrollspy Vertical Nav example. For a bounded panel with overflow but no links that follow the reader, 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 Horizontal Nav?
Is Shadcn Scrollspy Horizontal Nav free to use?
Which components does Shadcn Scrollspy Horizontal 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.