Beside a scrolling article
Scroll the box: the rail fills continuously through each section, items you've passed dim to 'read', and the glowing dot marks exactly where you are. Click an item to jump.
onActiveChange → —
tsx
<aside style={{ position: 'sticky', top: 24 }}>
<SectionNav
title="On this page"
items={[
{ id: 'overview', label: 'Overview' },
{ id: 'getting-started', label: 'Getting started' },
{ id: 'configuration', label: 'Configuration' },
]}
onActiveChange={(id) => console.log(id)}
/>
</aside>
<section id="overview">
<h2 data-section-heading>Overview</h2>
…
</section>