Anchor

The page index, which follows the scroll and marks the section the person is in.

On this page

Playground

Current part

Background

HTML

<nav class="feitio-anchor" aria-label="Index example"><p class="title">On this page</p><ul><li><a href="#playground" aria-current="location"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>When to use</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Examples</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Accessibility</a></li></ul></nav>

When to use

On long pages with several sections: documentation, a guide, a policy.

When not to use

Short pages, with one or two sections: the page already fits the eye.
To move between pages: Nav.

Examples

The index

The page’s headings (h2, and h3 under them). The current section is in ink and bold, with the hand-drawn arrow in front. This page has its own, on the right on wide screens.

Show code

HTML

<nav class="feitio-anchor" aria-label="Nesta página">
  <p class="title">Nesta página</p>
  <ul>
    <li><a href="#quando">…Quando usar</a></li>
    <li><a href="#exemplos" aria-current="location">…Exemplos</a>
      <ul><li><a href="#ex-mobile">…No mobile</a></li></ul>
    </li>
  </ul>
</nav>

On this page

On mobile

The same index goes in a closed "On this page" Details at the top of the content. Tapping a section scrolls to it and closes the list.

Show code

HTML

<details class="toc-mobile">
  <summary>…Nesta página</summary>
  <nav class="feitio-anchor">…</nav>
</details>

Anatomy

Title: "On this page".
Section: a link per h2, in soft ink.
Current section: ink, bold and the hand-drawn arrow. No side stripe.
Subsection: the h3s, one step in.

States

Scrolling: the marked section changes along, with the transition; at the end of the page, the last one stays marked.
Tap on a section: the page scrolls smoothly to it, and the address follows.
Index taller than the screen: it scrolls on its own, with ScrollFade.

Do and don’t

The current section with ink, bold and the arrow.

Don’t

The orange side stripe: the mark of every generic doc site.

A named <nav>; the current section with aria-current="location".
On tap, focus goes to the section heading.

Attributes

Attribute	Values	What for
`class="feitio-anchor"`	on the `<nav>`	The list of sections, with the current one marked.
`aria-current="location"`	on the current section	Ink, bold and the arrow; set by the script.
`id`	on each `h2` and `h3`	Without an `id`, the heading stays out of the index.