# Anchor

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

## Playground

```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>
```

### 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

1.  **Título:** "Nesta página".
2.  **Trecho:** um link para cada `h2`, em tinta suave.
3.  **Trecho atual:** tinta, negrito e a seta à mão. Nada de faixa do lado.
4.  **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.

## Acessibilidade

-   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.