Network · route-strip

Route strip

In-page wayfinding for long pages: each section heading is a station. Passed sections are filled and the one in view has the halo.

In these docs

Every page of these docs with three or more sections has one. On a wide screen it runs down the right gutter; below that, it is the row of section links under the page title. Scroll this page and watch the stations fill.

Behavior

A small client component watches the headings with IntersectionObserver: the section in view becomes “here” (aria-current="location"), sections above it “passed”.
State changes over 200ms; instantly under reduced motion.
With JavaScript off it is a plain list of links.

Usage

const sections = [
  { id: "about", label: "About us" },
  { id: "vision", label: "Vision and mission" },
  { id: "sejarah", label: "Sejarah" },
]

// sticky in the gutter from lg up
<aside className="hidden lg:block">
  <div className="sticky top-24"><RouteStrip sections={sections} /></div>
</aside>

// under the page title below lg
<RouteStrip variant="strip" sections={sections} className="lg:hidden" />

// each h2 carries the matching id
<h2 id="about" className="type-display-lg scroll-mt-24">About us</h2>

Rules

Only on pages with 3 or more h2 sections: About, Kepengurusan, event detail, articles.
On the org site it runs down the left gutter. These docs put it on the right because the docs navigation holds the left.
The aria-label defaults to “On this page”.