Section Scrollspy
Floating section scrollbar that tracks the active heading as you scroll.
10.9 KB
•Updated on September 20, 2026
Mark each block with data-page-section and an h2. The bar reads the heading (and an optional badge) then follows scroll.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-section-scrollspyUsage
Code
import * as React from 'react'
import { SectionScrollspy } from '@/components/spaceui/section-scrollspy'
export default function SpaceUI() {
const scrollRef = React.useRef<HTMLDivElement>(null)
return (
<div ref={scrollRef} className="relative h-[420px] overflow-y-auto">
<section data-page-section>
<h2>Installation</h2>
</section>
<SectionScrollspy containerRef={scrollRef} />
</div>
)
}Pass portal to pin it to the viewport. Omit containerRef to track window scroll.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
containerRef | RefObject<HTMLElement> | — | Scroll root. Window if omitted |
selector | string | [data-page-section] | Section query |
portal | boolean | false | Render into document.body |
className | string | — | Root class |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page
Powered by