Table of contents
The sections of a reading page: sticky beside the content on a wide screen, a row of chips that scrolls sideways on a phone, the section being read marked — with TocLayout to place it.
Web only — React, from @krizaka/ui/toc. Beta: its API may still change in a minor version.
When to use
- A long page read in sections: a building block's page, a guide, a policy.
- When readers jump to one part (install, decisions, status) more than they read from the top.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Toc, TocLayout } from "@krizaka/ui/toc";Examples
A reading page
Three sections, the contents in a sticky column beside them.
Install
The install of the building block.
Decisions
The decisions of the building block.
Status
The status of the building block.
Props
Toc
The sections of the page, the one being read marked.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | readonly { id: string; label: ReactNode; }[] | — | The sections, in order: the id of each section's title and its words. |
labelrequired | string | — | The navigation's name and visible label: On this page. |
TocLayout
A reading page: the table of contents in a sticky column on the left, the sections beside it (one column on a phone).
| Prop | Type | Default | Description |
|---|---|---|---|
tocrequired | ReactNode | — | The table of contents (a Toc). |
Accessibility
- A
navnamed by its label, with an ordered list of links. - The section being read carries
aria-current="location", found by one IntersectionObserver.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves through the sections' links; Enter jumps to the section. |
Best practices
- Three to eight entries, the words of the section titles.
- Every entry points at a heading's
id(aSection's): its anchor. - Set
--kz-anchor-offsetonce to clear a fixed navigation bar.
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Stage banner
The announcement of a chapter: a stage and its name on one line, or, large, a stage above a title and a line — a sober eyebrow by default, a stage call that slams in for the arcade flavour.
Card
The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.