Components
ScrollSpy
Sticky section nav that highlights the link for whichever section is in view.
ScrollSpy renders an anchor-link list and tracks which target section is
currently visible using an IntersectionObserver, highlighting that link.
Each item.id must match the id of an element on the page. It's the
pattern used for in-page docs navigation (like this site's right-hand TOC) —
pair it with long single-page content split into id-tagged sections.
If you need the active id without the prebuilt nav markup (e.g. to drive your
own UI), use the exported useScrollSpy(ids) hook directly instead.
Example
Preview
Primitive Basics — buttons, inputs, badges.
Form Inputs — selects, checkboxes, switches.
Overlays — dialogs, popovers, tooltips.
Charts — bar, line, and pie visualizations.
import { ScrollSpy } from '@officina/ui';
<ScrollSpy
items={[
{ id: 'overview', label: 'Overview' },
{ id: 'pricing', label: 'Pricing' },
{ id: 'faq', label: 'FAQ' },
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | ScrollSpyItem[] | — | |
| containerId | string | — | Scroll container element id — defaults to the viewport. |
| onActiveChange | (id: string) => void | — | |
| rootMargin | string | — | Root margin handed to IntersectionObserver — tune when a section counts as active. |