Anchor

L'index de la page, qui suit le défilement et marque la section où se trouve l'utilisateur.

Sur cette page

Playground

Partie actuelle

Fond

HTML

<nav class="feitio-anchor" aria-label="Exemple d’index"><p class="title">Sur cette 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>Quand l’utiliser</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Exemples</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Accessibilité</a></li></ul></nav>

Quand l'utiliser

Sur les pages longues avec plusieurs sections : une documentation, un guide, une politique.

Quand ne pas l'utiliser

Pages courtes, avec une ou deux sections : la page suffit déjà à l'œil.
Pour se déplacer entre les pages : Navigation.

Exemples

L'index

Les titres de la page (h2, et h3 sous eux). La section actuelle est en noir gras, avec la flèche dessinée à la main devant. Cette page possède la sienne, sur le côté droit sur les écrans larges.

Afficher le 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

Sur mobile

Le même index s'insère dans une liste fermée « Sur cette page » Details en haut du contenu. Appuyer sur une section défile vers elle et ferme la liste.

Afficher le code

HTML

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

Anatomie

Titre : « Sur cette page ».
Section : un lien par h2, en encre douce.
Section actuelle : en encre, gras et la flèche dessinée à la main. Pas de bande latérale.
Under-section : les h3, un cran plus bas.

États

Défilement : la section marquée change avec la transition ; à la fin de la page, le dernier reste marqué.
Appui sur une section : la page défile doucement vers elle, et l'adresse suit.
Index plus haut que l'écran : il défile tout seul, avec ScrollFade.

Faire et ne pas faire

La section actuelle en encre, gras et la flèche.

Don’t

La bande latérale orange: le signe de tout site générique de doc.

Un élément <nav> nommé ; la section actuelle avec aria-current="location".
Au clic, le focus passe sur l'en-tête de la section.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-anchor"`	sur l'élément `<nav>`	La liste des sections, avec la actuelle marquée.
`aria-current="location"`	dans la section actuelle	Ink, bold et la flèche ; défini par le script.
`id`	sur chaque `h2` et `h3`	Sans un `id`, l'en-tête reste hors de l'index.