Fil d’Ariane

Le fil d’Ariane est la piste de navigation en haut de chaque page de documentation, de la racine de la documentation jusqu’à la page courante. Il montre l’emplacement sans devenir une deuxième table des matières : court, ordonné du général au précis et surtout utile sur les pages profondes.

Cette page affiche le composant en direct — la piste au-dessus du titre, Documentation / Site / Composants / Fil d’Ariane, est son propre fil d’Ariane.

Quand l’utiliser#

• Pages de documentation seulement : le gabarit de la documentation affiche la piste sur chaque page sous /docs/, aucune autre section ne l’utilise et les pages n’ajoutent jamais la leur
• Montrer l’emplacement, pas la navigation — la piste répond à « où suis-je? » sans devenir une deuxième table des matières
• Gardez-le court et ordonné du général au précis; il est surtout utile sur les pages profondes

Implémentation#

{{ partial "docs/breadcrumbs.html" . }}

<nav class="docs-breadcrumbs" aria-label="Fil d'Ariane">
  <ol class="docs-breadcrumbs-list">
    <li><a href="/fr/docs/">Documentation</a></li>
    <li><a href="/fr/docs/site-implementation/">Implémentation du site</a></li>
    <li><a href="/fr/docs/site-implementation/components/">Composants</a></li>
    <li aria-current="page">Fil d’Ariane</li>
  </ol>
</nav>

Le partial Hugo est layouts/partials/docs/breadcrumbs.html, appelé une seule fois par le gabarit layouts/partials/docs/shell.html; les pages ne l’appellent jamais directement. Il parcourt les ancêtres de la page dans la section docs, enveloppe la piste dans un <ol> de <li> selon le modèle de fil d’Ariane de WAI-ARIA, lie chaque ancêtre et marque la page courante avec un <li aria-current="page"> non lié. Le libellé aria-label vient de la clé i18n brandDocsBreadcrumbLabel. Le partial reçoit le contexte de page et n’accepte aucune option. Il n’y a pas de JavaScript; les séparateurs / sont du contenu généré en CSS sur .docs-breadcrumbs-list li + li, pas des éléments du DOM, et le reste du style vient des règles .docs-breadcrumbs* dans assets/css/site.css.

Accessibilité#

• La piste est un point de repère <nav> nommé « Fil d’Ariane » par aria-label, depuis la clé i18n brandDocsBreadcrumbLabel, pour que les lecteurs d’écran la distinguent de la navigation du site
• La piste est un vrai <ol> de <li>, pour que les lecteurs d’écran annoncent la position et la longueur du chemin, selon le modèle de fil d’Ariane de WAI-ARIA
• La page courante est le dernier <li>, portant aria-current="page" sans lien à l’intérieur; chaque <li> ancêtre porte un lien ordinaire
• Les séparateurs / sont du contenu généré en CSS, pas des éléments du DOM : rien à ignorer ni à annoncer pour la technologie d’assistance
• Clavier : Tab parcourt les liens des ancêtres et Entrée en suit un; l’élément de la page courante ne reçoit pas le focus
• Évitez de lier la page courante — le dernier élément reste un <li> non interactif avec aria-current="page"