When to use
Section titled “When to use”- On a long page with three or more sections: an agreement, a fee table, a settings summary.
When not to use
Section titled “When not to use”- For moving between pages: use Breadcrumbs or the sidebar.
- For content that changes in one place: use Tabs.
- On a short page: a list of links adds nothing.
Anatomy
Section titled “Anatomy”- Title: the name of the navigation, “On this page” by default.
- Line: the thin border at the start of the links.
- Link: a
#idlink to a section heading. - Current mark: the selected border on the link of the section being read.
- Sublinks: one level of subsections.
Behaviour
Section titled “Behaviour”- The links go to the sections with
#id; browser history and shared links work. - Without
current, the first section in the top 40 % of the viewport is current. - With
current, the mark comes only from it;onCurrentChangeis still called.
Guidelines
Section titled “Guidelines”- Use the section heading as the link text.
- Use at most one sublevel.
- Give the sections a
scroll-margin-topthat clears a fixed top bar.
Content
Section titled “Content”- Keep headings short and distinct: “Commission”, “Settlement”.
Related components
Section titled “Related components”- Tabs: panels that change in one place.
- Breadcrumbs: where the page sits in the hierarchy.