Anchor

O índice da página, que acompanha a rolagem e marca o trecho em que a pessoa está.

Nesta página

Playground

Trecho atual

Fundo

HTML

<nav class="feitio-anchor" aria-label="Exemplo de índice"><p class="title">Nesta página</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>Quando usar</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Exemplos</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Acessibilidade</a></li></ul></nav>

Quando usar

Em páginas longas, com várias seções: a documentação, um guia, uma política.

Quando não usar

Páginas curtas, de uma ou duas seções: a página já cabe no olho.
Para navegar entre páginas: Nav.

Exemplos

O índice

Os títulos da página (h2, e h3 embaixo deles). O trecho atual fica em tinta e negrito, com a seta à mão na frente. Esta página tem o dela, à direita na tela larga.

Mostrar código

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>

Nesta página

No mobile

O mesmo índice vai num Details "Nesta página", fechado no topo do conteúdo. Tocar num trecho rola até ele e fecha a lista.

Mostrar código

HTML

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

Anatomia

Título: "Nesta página".
Trecho: um link para cada h2, em tinta suave.
Trecho atual: tinta, negrito e a seta à mão. Nada de faixa do lado.
Subtrecho: os h3, um passo para dentro.

Estados

Rolando: o trecho marcado muda junto, com a transição; no fim da página, o último fica marcado.
Toque num trecho: a página rola suave até ele, e o endereço acompanha.
Índice maior que a tela: rola sozinho, com o ScrollFade.

Bons e maus padrões

Faça assim

O trecho atual com tinta, negrito e a seta.

Não faça

A faixa laranja do lado: a marca de toda documentação genérica.

Um <nav> com nome; o trecho atual com aria-current="location".
Ao tocar, o foco vai para o título do trecho.

Atributos

Atributo	Valores	Para quê
`class="feitio-anchor"`	no `<nav>`	A lista de trechos, com a marca do atual.
`aria-current="location"`	no trecho atual	Tinta, negrito e a seta; posto pelo script.
`id`	em cada `h2` e `h3`	Sem `id`, o título não entra no índice.