On this page
Overview
The page's headings on its own, each nested under the one above it, with the section the reader is in marked.
Show code, DocsArticle.tsx
Variants
Sections of your own
A section need not be a heading: name any part of the page, such as a card or a chart, in words of your own.
Show code, CustomSections.tsx
Anatomy
Contents
Reader's place
Link
Current section
Show code, TableOfContentsAnatomy.tsx
Behaviour
The reader's place
One shape down the side of the list bulges beside the section the reader is in, in one quiet color.
- It keeps its shape as it moves: it follows the scroll, and glides calmly to a section further away, arriving as that section's label takes the text color.
- It moves at once where reduced motion is preferred.
- The current section's label is in the text color and drawn a little heavier, at the same widths, so no label rewraps as the reader moves.
- The section under the pointer swells it a little, and its label takes the text color.
- It runs a little past the first and last sections, and at either one the bulge is drawn smaller, a little toward the middle, so it tapers whole before the shape ends.
Going to a section
A link scrolls its section to the top, below anything that stays there, such as a header.
Adapting to width
Long labels wrap onto more lines, and the shape runs beside all of them.
Show code, LongLabels.tsx
Rules
Keep the contents short: two levels, each section on one line.
Use it when
- A long page of several sections, such as a guide or an article, read from top to bottom
- Seeing where you are on the page, and jumping to another of its sections
Show code, TwoLevels.tsx
Show code, DeepOutline.tsx
Beside the content
Place it in a column beside the content, at the top and staying in view as the page scrolls.
- Leave it out where the page is too narrow for the column, or has fewer than three sections.
Labels
Use the headings' own words, or a short name a reader would find on the page. Keep each on one line: give the column the room its labels need.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves through the links. |
| Enter | Scrolls to the link's section and moves focus to its start. |