Markers · built in, opt-in
Three looks.
One attribute.
Scroll each sample. Every marker is drawn by the library from a constructed stylesheet in @layer chapter: no CSS file to load, nothing that a strict Content Security Policy would block, and every value a custom property.
data-chapter-marker="line"
Line
The default. A faint rail, a fill up to the active link, a glowing line and a soft band behind the row.
<nav data-chapter data-chapter-build data-chapter-marker></nav>Reading
Every outline here is built from the headings beside it by one attribute, and follows this panel's own scrolling.
The marker glides with an expo-out ease that settles quickly, and jumps instantly under reduced motion.
Install
One package, no stylesheet, no peer dependencies. Script tag or import.
Attributes
data-chapter, data-chapter-build and data-chapter-marker cover almost every page.
Everything else is read from your CSS.
Events
A bubbling chapter:change event reports each new section.
Styling
Custom properties for colour, width, timing and the band.
Your CSS beats the built-in layer.
Short end
Short last sections still get a turn.
data-chapter-marker="pill"
Pill
A rounded highlight glides behind the active link and resizes to fit it. No rail.
<nav data-chapter data-chapter-build data-chapter-marker="pill"></nav>Reading
Every outline here is built from the headings beside it by one attribute, and follows this panel's own scrolling.
The marker glides with an expo-out ease that settles quickly, and jumps instantly under reduced motion.
Install
One package, no stylesheet, no peer dependencies. Script tag or import.
Attributes
data-chapter, data-chapter-build and data-chapter-marker cover almost every page.
Everything else is read from your CSS.
Events
A bubbling chapter:change event reports each new section.
Styling
Custom properties for colour, width, timing and the band.
Your CSS beats the built-in layer.
Short end
Short last sections still get a turn.
data-chapter-marker="minimal"
Minimal
Just the line: no track, no glow, no band. For dense sidebars and quiet themes.
<nav data-chapter data-chapter-build data-chapter-marker="minimal"></nav>Reading
Every outline here is built from the headings beside it by one attribute, and follows this panel's own scrolling.
The marker glides with an expo-out ease that settles quickly, and jumps instantly under reduced motion.
Install
One package, no stylesheet, no peer dependencies. Script tag or import.
Attributes
data-chapter, data-chapter-build and data-chapter-marker cover almost every page.
Everything else is read from your CSS.
Events
A bubbling chapter:change event reports each new section.
Styling
Custom properties for colour, width, timing and the band.
Your CSS beats the built-in layer.
Short end
Short last sections still get a turn.
Theme it #
Set custom properties on the nav, or write plain CSS against chapter-rail, chapter-rail::after and chapter-band. Unlayered rules always win over the library's layer.
nav[data-chapter] {
--chapter-color: #a5b4ff;
--chapter-color-2: #f0abfc;
--chapter-duration: .45s;
}--chapter-color- Line, glow, fill and band tint.
--chapter-color-2- Second stop of the line's gradient.
--chapter-width- Line width,
2px. --chapter-duration- Glide time,
.6s. --chapter-ease- Glide easing, an expo-out curve.
--chapter-rail- Track colour.
--chapter-glow- The line's
box-shadow. --chapter-band- Background behind the active row or pill.
--chapter-radius- Pill corner radius.
--chapter-indent- Indent of nested levels,
1em.