Composants

Fil d'Ariane

Le fil d’Ariane indique l’emplacement de la page courante dans l’arborescence du site et permet de remonter d’un niveau. Il est généré en CSS : le séparateur n’est pas dans le HTML.

Fil d'Ariane de base#

Placez une liste ordonnée breadcrumb dans un nav nommé par aria-label. La page courante est le dernier élément : il porte active et aria-current="page" et n’est pas un lien.

<nav aria-label="Fil d'Ariane">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Accueil</a></li>
    <li class="breadcrumb-item"><a href="#">Mes comptes</a></li>
    <li class="breadcrumb-item active" aria-current="page">Relevés</li>
  </ol>
</nav>

Un seul niveau#

Quand la page est directement sous l’accueil, le fil se réduit à deux éléments.

<nav aria-label="Fil d'Ariane, un niveau">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Accueil</a></li>
    <li class="breadcrumb-item active" aria-current="page">Épargne</li>
  </ol>
</nav>

Séparateur personnalisé#

Changez le séparateur avec la propriété CSS --bs-breadcrumb-divider. La valeur est une chaîne entre apostrophes. Pour retirer le séparateur, mettez une chaîne vide : --bs-breadcrumb-divider: '';.

<nav style="--bs-breadcrumb-divider: '›';" aria-label="Fil d'Ariane, séparateur chevron">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Accueil</a></li>
    <li class="breadcrumb-item"><a href="#">Prêts</a></li>
    <li class="breadcrumb-item active" aria-current="page">Simulateur</li>
  </ol>
</nav>

Séparateur en image#

La propriété accepte aussi une image url(), par exemple un SVG encodé. Le séparateur est alors un fond : il reste décoratif.

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="Fil d'Ariane, séparateur image">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Accueil</a></li>
    <li class="breadcrumb-item"><a href="#">Cartes</a></li>
    <li class="breadcrumb-item active" aria-current="page">Opposition</li>
  </ol>
</nav>

Classes

Classes
Classe	Rôle
`breadcrumb`	Liste du fil : disposition en ligne qui passe à la ligne si nécessaire, et marge basse.
`breadcrumb-item`	Un niveau ; le séparateur est ajouté avant chaque élément qui en suit un autre.
`active`	Dernier niveau, page courante (couleur atténuée).

Variables Sass

Variables Sass
Variable	Défaut	Rôle
`$breadcrumb-font-size`	`null`	Taille du texte.
`$breadcrumb-padding-y`, `$breadcrumb-padding-x`	`0`	Espacement interne de la liste.
`$breadcrumb-item-padding-x`	`.5rem`	Espace autour du séparateur.
`$breadcrumb-margin-bottom`	`1rem`	Marge sous le fil.
`$breadcrumb-bg`	`null`	Fond du fil.
`$breadcrumb-divider-color`	`var(--bs-secondary-color)`	Couleur du séparateur.
`$breadcrumb-active-color`	`var(--bs-secondary-color)`	Couleur du niveau actif.
`$breadcrumb-divider`	`quote("/")`	Séparateur par défaut. Une image SVG s’écrit avec `url()`.
`$breadcrumb-border-radius`	`null`	Arrondi du fond.

Personnalisation#

// Global : avant l'import de Cauri
$breadcrumb-divider: quote("›");
$breadcrumb-item-padding-x: 0.75rem;
$breadcrumb-margin-bottom: 1.5rem;
$breadcrumb-bg: #EAEBEA;
$breadcrumb-padding-x: 1rem;
$breadcrumb-padding-y: 0.5rem;
$breadcrumb-border-radius: 0.3125rem;

// Local : propriétés CSS du fil
.fil-agence {
  --bs-breadcrumb-divider-color: #0856A1;
  --bs-breadcrumb-item-active-color: #212121;
}

Bonnes pratiques

À faire

Reflétez la hiérarchie du site, pas l’historique de navigation de l’utilisateur.
Commencez par la page d’accueil et terminez par la page courante.
Gardez des libellés courts, identiques au titre des pages correspondantes.

À éviter

Ne rendez pas la page courante cliquable.
Ne l’utilisez pas à la place du menu principal.
N’affichez pas de fil d’Ariane sur la page d’accueil.

Accessibilité

Enveloppez la liste dans un nav avec aria-label="Fil d'Ariane" pour qu’elle soit repérée comme un point de repère.
Marquez la page courante avec aria-current="page".
Le séparateur est du contenu CSS décoratif : les lecteurs d’écran ne le lisent pas.
Gardez un contraste suffisant pour le niveau actif et le séparateur si vous changez leurs couleurs.