Breadcrumb

Le fil d’Ariane situe l’utilisateur dans l’arborescence du site. Les séparateurs sont générés en CSS (::before), pas insérés dans le HTML — le contenu lu par un lecteur d’écran reste propre.

Do / Don’t

✓ Faire

Toujours commencer par « Accueil »
Garder les libellés courts et fidèles aux titres de page réels

✗ Éviter

Transformer le dernier élément (page courante) en lien cliquable
Utiliser le fil d’Ariane comme seule navigation d’une page profonde — il complète, ne remplace pas le menu principal

Structure : liste ordonnée <ol> d’items tds-breadcrumb__item, séparateur / généré en CSS (::before), dernier item en texte simple (tds-breadcrumb__current).

Importation

@import "@tds-tchad/core/components/breadcrumb/breadcrumb.css";

import { breadcrumb } from '@tds-tchad/core/components/breadcrumb';

Exemple

<nav class="tds-breadcrumb" aria-label="Fil d'Ariane">
  <ol class="tds-breadcrumb__list">
    <li class="tds-breadcrumb__item">
      <a href="/" class="tds-breadcrumb__link">Accueil</a>
    </li>
    <li class="tds-breadcrumb__item">
      <a href="/demarches" class="tds-breadcrumb__link">Démarches</a>
    </li>
    <li class="tds-breadcrumb__item">
      <span class="tds-breadcrumb__current" aria-current="page">Renouvellement de carte</span>
    </li>
  </ol>
</nav>