Outline
Links to the sections of a page, indented by depth, with a mark on the one you are reading. Compact shows ticks.
Features
- Section links indented by heading depth, with a tick that grows and inks on the section you are reading.
- The current section is the last heading past the top third of the window, checked once a frame while scrolling.
- Compact draws ticks only and opens into the labelled list on hover or focus.
Use it for
- Articles and docs.
- Long settings pages.
On this site
- My Stuff: each articleWhere you are in the article, and a way to any section.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
items | { title, url, depth }[] | url is the #id of the heading. |
label | string | The nav label (On this page). |
compact | boolean | Ticks that open on hover or focus. |
Accessibility
- A labelled nav; the current link has aria-current=location.
- Compact opens on keyboard focus too.
Source
The code is in src/kit/outline.tsx in runets, MIT licensed.