Features

Bulleted pitch — three columns, each with an icon and a paragraph. Click "Features" in the strip above to jump straight here. The IntersectionObserver under the hood updates the active link as soon as this heading crosses the viewport-top + offset line.

What makes the strip useful for marketing pages: flat anchor structure (4 sections, all <h2>), wide content. A vertical sidebar spine would feel excessive when there are only four jumps. The horizontal strip is the right shape.

Each link auto-truncates at --reading-toc-link-max-width: 24ch so a long heading doesn't push siblings off-screen. The list itself is overflow-x-auto, so a strip with 6+ items still scrolls cleanly without breaking the page layout.

The strip is mobile-hidden by default (hideBelow="sm"), since narrow viewports can't host a 3-4-link horizontal nav without overflow. The vertical reading-spine takes over below that breakpoint when both are present.

Scroll past this paragraph to flip the active link to "Pricing". The active section is decided at the same line a jump stands a heading on, just below the strip, so the flip lands there rather than at the viewport top.

The strip's keyboard model leans on the underlying anchor links — Tab moves between visible links, Enter activates the smooth-scroll. No custom focus ring is needed; the focus-visible state inherits the global --color-wk-ring token so it stays consistent with every other nav primitive on the page.

Screen readers announce the strip as "Page sections, navigation" thanks to the aria-label="Page sections" on the wrapping <nav>. Each link carries the destination heading text directly — no extra ARIA labeling needed.

Idle-state link color is --reading-toc-color-idle (muted-text by default). The active state swaps to --reading-toc-color-active (accent by default). Both tokens cascade through the theme system, so a Cupertino-themed page sees the strip in Cupertino blue automatically.

Reduced-motion users get an instant active-link swap with no fade — the 150 ms transition on the link color collapses to 1ms via the global @media (prefers-reduced-motion: reduce) block. Smooth-scroll collapses to instant scroll the same way.

The strip's hover state is intentionally subtle — a 4% accent-tinted background on the link's pill chrome — so an inactive section's hover doesn't compete visually with the active link's bolder weight + accent color. Hover affordance without distraction.

Pricing

Three tiers, each in a card. The TOC link for "Pricing" highlights as soon as the reader scrolls into this section. The smooth-scroll math accounts for the strip's offset so the destination heading lands just below the strip, not under it.

The active-state color comes from --reading-toc-color-active. By default it's the accent token; developers can override per-page via inline custom-property declarations or globally via app.css. Idle and active states transition over 150 ms unless prefers-reduced-motion: reduce is set.

Click any link → smooth-scroll. The URL hash updates via history.replaceState(), not pushState() — back-button still goes to the previous page rather than the previous anchor.

The hover state on each pricing card uses the same elevation token as the rest of the system (--shadow-wk-md). Adding a discount badge or "most popular" pill is a one-line override on the card's :slot="badge" if the recipe developer needs it.

For longer pricing pages — multiple tiers per region, add-on rows, FAQ accordions per tier — switch the TOC's levels="2,3" so the strip also picks up the per-tier sub-headings.

Tier comparison tables nest naturally under a pricing section. The TOC strip ignores any heading deeper than the configured level, so per-tier <h3> headings with levels="2" don't pollute the strip — but pass levels="2,3" and they become first-class anchors.

Deep-linking works out of the box. Sharing a URL ending in #ml-pricing scrolls the reader directly to this section on page load, and the IntersectionObserver highlights the matching link once it settles. That first jump is the browser's own fragment navigation, so give the headings a scroll-margin-top when the strip carries an offset — the component adds nothing to a scroll it did not start.

If your pricing section is dynamically rendered (Livewire pricing-tier component with locale-driven content), the TOC re-observes its target on every Livewire morph — the strip stays in sync as the section's heading or layout changes.

Pricing-page conversion best practice: keep one canonical CTA per tier, repeat the primary CTA at the section's bottom edge so scrolling past the table lands on a buy button. The TOC handles the navigational symmetry — readers can jump back up to compare tiers without losing the CTA in the fold.

For currency or region toggles, render them OUTSIDE the article container so they don't interfere with the TOC's section-heading scan. A toolbar above the brand-bar is the canonical placement; a sticky toolbar BELOW the TOC works too with appropriate offset stacking.

FAQ

Common questions in a bulleted list — last anchor in the strip. The strip stays visible all the way down the page (position: sticky; top: 0 by default), so the reader can jump back to any earlier section without scrolling all the way up.

One reasonable extension is to add a "Back to top" pseudo-anchor at the end of the strip. Pass :backToTop="true" on a future revision; until then, developers can append a manual link at the strip's edge using the slot pattern.

If your landing page grows beyond 5-6 anchored sections, switch to the vertical reading-spine instead. The horizontal strip overflows fast at viewport widths under 1024 px, even with per-link truncation.

Bottom of the page — scrolling further won't flip any link past "FAQ" because there is no further anchor. The active state stays sticky to the last in-view section, which is the documented behavior.

FAQ entries themselves benefit from the <x-wirekit::accordion> component — each question becomes an expandable row, with the answer hidden by default. The accordion's open/closed state is independent of the TOC active-link state, so opening an entry doesn't perturb the strip.

For structured data, <x-wirekit::faq> emits the FAQPage JSON-LD for the questions it renders (its schema prop, on by default), so the page needs no second block. The TOC and that script coexist without interference.

If a question links to a docs page, prefer same-tab navigation for in-domain links and an opt-in target="_blank" rel="noopener" for cross-domain links. The strip stays anchored to the current page; cross-domain navigation breaks the back-button-to-anchor contract.

An "Ask another question" CTA at the bottom of the FAQ section flows naturally without disrupting the strip — the section's last paragraph and the CTA share the same anchor (#ml-faq), so the active link doesn't flicker between two sections at the boundary.

For lengthy FAQ blocks (15+ questions), consider grouping them by topic with sub-headings (<h3>) and passing levels="2,3" to the TOC so each topic group gets its own anchor in the strip.

The strip's position: sticky + overflow-x: auto combination remains stable to the bottom of the page — even on long FAQ sections that scroll past the natural viewport multiple times. No re-layout, no re-paint of the strip chrome.

for

headings and renders one link per heading. --}} {{-- 3. Prose wrapper with `density="compact"` for marketing-page rhythm: tighter heading margins, smaller h2 type scale than the long-form-article default. --}}

Features
...

Pricing
...

FAQ
...

``` ## What's happening 1. `` renders a `
` immediately inside `
`. The strip auto-scans `
` for `
` elements (default `levels="2"`) and renders one link per heading. 2. The strip itself is `position: sticky` with `top: var(--reading-toc-offset)`. Default offset is `0` — the strip sits flush against the viewport top. Pass `offset="4rem"` to clear a 64px fixed nav above. 3. As the reader scrolls, the component works out which heading has come up to the line just below the strip and updates `activeIndex`. The active link gets `aria-current="location"` and the active-state color from `--reading-toc-color-active`. 4. Click any link → smooth-scroll to the matching `
` heading; the URL hash updates without a full history push. ## Add a fixed nav above the TOC The preview below mirrors the first preview's content. The brand-bar stays in normal flow — it scrolls away with the rest of the article — and the TOC strip pins to the viewport top once the user scrolls past it. No `sticky` on the brand-bar, no `offset` on the TOC: the simplest composition, the one developers reach for first. If your real app already pins a brand-bar / primary-nav to the top of the viewport (a true `position: fixed` element OUTSIDE the article container, e.g. an app-level nav), the TOC needs to clear that height. Pass an `offset` matching the nav's height — the value flows into the sticky `top` position, the IntersectionObserver's `rootMargin`, AND the smooth-scroll target math, all from one source. The offset is shown in the snippet below the preview. :::preview{title="Reading TOC pinning to top after the brand-bar scrolls away", frame="iframe", height="640px", flush="true"} Sign in

Features

This strip carries no `offset`, so it pins flush to the viewport top (`position: sticky; top: 0`) once the brand-bar scrolls away — the shape a page reaches for first. Pass `offset="4rem"` and the same value flows into the visual position AND the IntersectionObserver root margin together, so the active section flips at the strip's bottom edge rather than at the viewport top.

Try scrolling: the brand-bar above is in normal flow and scrolls away, and the TOC takes its place at the very top. The active link cycles between Features and Pricing as the headings cross the strip's bottom edge.

The offset value passes through to all three places at once: `position: sticky; top`, the IntersectionObserver's `rootMargin`, and the smooth-scroll target offset. A single source of truth keeps the visual position and the active-detection point in lockstep.

Mounting a fixed brand-bar above the TOC is the common production shape. Pass the brand-bar's height as a number plus a unit — `offset="4rem"`, `offset="64px"` — and the TOC pins directly beneath it. The prop is a length, not a CSS expression: `var(…)` and `calc(…)` are rejected and fall back to `0` silently, so read the height token's value and write it out.

Brand-bar heights commonly land at 3.5rem, 4rem, or 5rem depending on whether they carry a logo + nav + actions or just a slim brand-only strip. The offset is a prop rather than a cascading variable, so it travels per instance — put the number in a Blade variable or a config value your layout passes down, and every strip stays in step from one place.

If multiple TOCs are present on the same page (rare but legitimate — e.g. a long-form article with both a top strip and a sidebar spine), each carries its own offset prop. They observe the same headings but render independently.

For a sticky brand-bar instead of fixed, the offset behavior is identical — sticky elements occupy the same viewport region. An offset TOC's `top` simply stacks below the brand-bar's own `top: 0`, and the IntersectionObserver root margin clears both.

When the offset value comes from a JS-resolved measurement (e.g. `document.querySelector('.brand-bar').offsetHeight`), resolve it on the server and bind the prop — `:offset="$navHeight . 'px'"`. The value is read once, when the strip initializes, and drives the sticky `top`, the IntersectionObserver `rootMargin` and the scroll target from that one read; changing it afterwards does not move the strip.

Keep scrolling — Features's section keeps pulling content while Pricing waits below. The active link should flip exactly when this section's bottom edge crosses the strip's bottom edge, not earlier and not later.

Pricing

Click either link in the strip to smooth-scroll. The math accounts for the offset so the destination heading is fully visible — not hidden under the strip. The same offset value drives all three concerns: visual position, active-detection rootMargin, and scrollTo target.

If your real app's fixed nav changes height, update the offset in lockstep. They're two halves of the same layout contract.

For developers whose top nav is sticky rather than fixed, the offset still applies — sticky elements occupy the same viewport region, so the TOC has to clear them either way.

Responsive brand-bars (taller on desktop, slimmer on mobile) need one decision rather than a breakpoint ladder: the offset is read once, at initialization, so it does not follow a media query. Pass the DESKTOP height — below the `hideBelow` breakpoint the strip is not rendered anyway, which is where the slimmer bar lives.

If the height still differs across the widths where the strip IS shown, pick the taller of the two. Overshooting leaves a gap above the strip; undershooting tucks it under the nav, and the same value also sets where the active link flips — so the pessimistic number is the one that keeps both readable.

The click-scroll does its own arithmetic — `window.scrollTo()` with the heading's position minus the offset, minus the strip's height, minus a little breathing room — so `scroll-margin-top` on the heading has no effect on it. That property is read by the BROWSER for a URL-fragment jump, which is the one path the component is not involved in, so setting it is how you make a shared `#anchor` land in the same place a click does.

Mobile-hidden default (`hideBelow="sm"`) means the offset prop is effectively dormant under 640 px viewports. The strip is display:none, so the offset doesn't push any content. Override with `hideBelow="none"` if your design has space for the strip on mobile — `none` is the escape hatch, and any other value falls back to the `sm` default rather than failing.

The brand-bar's own `z-index` stacks above the TOC by default (the strip is sticky inside the article container; the brand-bar is fixed outside). If you flip that order, the TOC briefly disappears under the brand-bar on overlap — usually not desired.

Pricing-page-specific tip: pixels are as welcome as rems — `offset="64px"`. Useful when integrating with a third-party fixed-nav whose height isn't exposed as a token. Keep the unit: a bare `64` passes the prop's own parse and then lands in `top: 64`, which is not a length, so the browser drops it and the strip pins at the viewport top.

Extras

If your top nav lives outside the article container — a sibling to `<main>` at the layout root — the offset is the only adjustment the TOC needs. The article body itself sits in normal flow and doesn't need a matching `padding-top`.

If your top nav lives INSIDE the article container (as a header preceding the TOC, like the brand-bar in this preview), the article body's padding-top is implicit — the brand-bar takes its own vertical space.

The offset prop is the single layout primitive: bump it to match whatever sits above the TOC, regardless of whether that thing is fixed, sticky, or in flow.

For deeply nested layouts (e.g. a sidebar shell with a header bar and a sub-nav per route), add the two heights up yourself and pass the sum as one length — `offset="7rem"`. The prop takes a number and an optional `px` / `rem` / `em`, nothing more; a `calc()` is discarded and the strip falls back to `0` without saying so.

When the page has both a brand-bar AND a secondary nav row (e.g. category tabs), that sum is the offset. A sub-nav that appears on only some routes is therefore a per-route value: render the strip with the offset that route actually has, rather than expecting one instance to follow a nav that grows after it mounted.

If your article-body container has its own padding-top (e.g. `<main style="padding-top: 2rem">`), that padding doesn't affect the TOC's offset — the strip's sticky position is relative to the viewport, not the article container. The article's padding only affects where the heading text sits, not the strip.

For pages with anchor-based deep-linking (URL hashes that scroll the reader directly to a section), the jump on page load is the browser's, not the strip's — the component reads no hash and adds no offset to it. Give the headings a `scroll-margin-top` that matches the offset plus the strip's own height, or a shared `#ml-offset-pricing` link lands with the heading tucked underneath.

Print stylesheets typically want the TOC hidden — `@media print { .wk-reading-toc { display: none } }` achieves that. The article body retains its anchor structure, which prints fine without the strip.

Final note on the offset contract: it's a one-way push. The TOC clears content ABOVE it via the offset; content BELOW the TOC is unaffected. No magic — just a sticky-top + IO-rootMargin + scroll-target-math triple that all read the same value.

::: ```blade {{-- 1. brand-bar in normal flow — it scrolls with the article and leaves the viewport as the reader scrolls past. The `actions` slot anchors a sign-in link to the bar's right content edge. --}} Sign in {{-- 2. `flush` keeps the first link's visible text on the same vertical spine as the brand text above and the h2 headings below. With no `offset`, the strip sticks to the viewport top (`top: 0`) once the brand-bar has scrolled away. --}} {{-- 3. If your real app pins a primary nav above the article (a true `position: fixed` element outside this snippet's scope), pass `offset="4rem"` matching the nav's height. The value flows into the sticky `top`, the IntersectionObserver's `rootMargin`, AND the smooth-scroll target math at once. --}} {{-- --}}
{{-- 4. Anchored sections — same as the first preview. --}}
Features
...

Pricing
...

Extras
...

``` The offset value passes through to: - `position: sticky; top: var(--reading-toc-offset)` — the visual offset of the strip. - The line that decides the active section — so a section becomes "active" when its heading comes up to the strip, not when it reaches the top of the viewport. - `scrollTo` math — so smooth-scroll lands the heading just below the strip, not under it. ## Use with reading-shell The recipe above uses `` directly. The shell wrapper is the alternative if you want a single tag that bundles the TOC with whichever other reading-* primitives apply. `:toc="true" :spine="false"` is the canonical marketing-landing combo. The shell's other defaults (progress bar, bookmark) still apply unless you turn them off explicitly. :::preview{title="reading-shell wrapping the marketing TOC", frame="iframe", height="520px", flush="true"} Features The shell wraps the TOC strip + progress bar in a single tag. Pass `:spine="false"` so the right-edge sidebar stays off — marketing pages typically don't need it. Pricing Click the "Pricing" link in the TOC strip above to smooth-scroll here. FAQ The bookmark prompt is still active because `:bookmark="true"` is the shell default. ::: :::source{language="blade"} {{-- your sections --}} ::: ## When NOT to use If your page has more than 5-6 anchored sections, or any nested `
` headings under the `
`s, the strip overflows fast at viewport widths under 1024px — even with the per-link `--reading-toc-link-max-width: 24ch` truncation. Reach for `` instead. The spine's collapsed-tick mode is the right shape for dense vertical TOCs at narrow widths. ## See Also - [``](/components/reading#reading-toc) — full props reference - [``](/components/reading#reading-spine) — vertical sidebar TOC for dense docs - [Long-form Article recipe](/blueprints/recipes/long-form-article) — the sibling pattern for blog posts