Components

SectionNav

Sticky navigation across the sections of a long page.

Sticky navigation across the sections of a long page: a click scrolls to the block, and the active entry lights up as you read.

Example

tsx

import { SectionNav } from "@toimetdev/pathlogs-core";

<SectionNav
  aria-label="Task sections"
  sections={[
    { id: "overview", label: "Overview" },
    { id: "checklist", label: "Checklist", count: 7 },
    { id: "comments", label: "Comments", count: 12 },
    { id: "history", label: "History" },
  ]}
/>

{/* further down the page */}
<section id="overview">…</section>
<section id="checklist">…</section>

Sections are located by id, so nothing is required of the page itself beyond those identifiers.

Behaviour

The scroll inset is taken from the bar itself: its top from CSS plus its height. The bar sticks under the header on a narrow screen and to the top of the window on a wide one — a hard-coded number would be wrong in one of those cases.
The row of sections drag-scrolls on a narrow screen, and clicking keeps working while it does: dragging engages only past a movement threshold.
Smoothness is disabled under prefers-reduced-motion.

Props

Prop	Type	Default	Description
`sections`*	`{ id: string; label: string; count?: number }[]`	—	Sections in the order they appear on the page. count is drawn as a badge on the right.
`aria-label`	`string`	—	The accessible name of the navigation: «Task sections».
`className`	`string`	—	Extra classes for the container.

sections*{ id: string; label: string; count?: number }[]

Sections in the order they appear on the page. count is drawn as a badge on the right.

aria-labelstring

The accessible name of the navigation: «Task sections».

classNamestring

Extra classes for the container.