Table of contents
A sticky on-page nav with an accent rail on the section in view (aequitas.js tracks it).
Examples
TOC
Anatomy
nav.toc | Sticky near the top of its column. Place it in an aside next to the content. |
> ul > li > a | One link per section, href="#id", with a hairline rail on its start edge. |
li > ul | Optional subsections, indented one step. |
API
| Attribute | Values | Description |
|---|---|---|
aria-current | boolean | On a link: the section in view. Full text colour and an accent rail. Any value matches. |
Behaviour
Watches each section a href="#id" link points at and sets aria-current on the link whose section crosses a band about a fifth of the way down the viewport, removing it from the others. Without it, set aria-current yourself.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- Label the
<nav>(aria-label="On this page") so it is distinct from site navigation. - aequitas.js sets
aria-current="true"on the link for the section in view, so screen readers announce it as current.