Overview
The ScrollSpy component is an essential wayfinding tool for single-page applications or long-scrolling marketing sites. It automatically tracks the user's scroll position and highlights the currently active section dot. Clicking on any dot smoothly scrolls the page to that specific section.
Usage
import { ScrollSpy } from "@/components/creative/scroll-spy"
export default function Page() {
const sections = [
{ id: "hero", label: "Introduction" },
{ id: "features", label: "Core Features" },
{ id: "pricing", label: "Pricing Plans" },
{ id: "contact", label: "Get in Touch" },
]
return (
<main>
<ScrollSpy sections={sections} alignment="right" />
<section id="hero" className="h-screen">...</section>
<section id="features" className="h-screen">...</section>
<section id="pricing" className="h-screen">...</section>
<section id="contact" className="h-screen">...</section>
</main>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ScrollSpy } from "@/components/creative/scroll-spy";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ScrollSpy } from "@/components/creative/scroll-spy";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ScrollSpy
sections{/* value */}
scrollContainerRef{/* value */}
alignment{/* value */}
/>
</div>
);
}