Dev Tools
PageToc
Sticky 'On this page' table of contents for long pages. Vertically centred in the viewport, with scroll-spy that automatically highlights the section currently in view. Hovering a grey link darkens it; hovering an already-active link is a visual no-op. Used on the Semantic Colors and Surface Elevations foundations pages.
Import
import PageToc from '../../components/utility/PageToc.astro';Usage
<div class="page-shell">
<div class="page-main"><!-- sections with matching ids --></div>
<PageToc items={toc} />
</div>
The component must sit in the 160px column of a .page-shell grid,
and each item.id must match the id of a section element
on the page (used as the scroll anchor and the scroll-spy target).
Props
| Prop | Type | Required | Description |
|---|---|---|---|
items | { id, label, sub? }[] | Yes | Sections to list. id links to the matching anchor; sub: true indents the item as a sub-section. |
title | string | No | Heading and aria-label (default On this page) |
Preview
Sticky centring and scroll-spy highlighting only activate on a real long page
with the matching section ids — this static preview shows the resting layout only.