Fil d'Ariane
Indiquez l'emplacement de la page actuelle dans une hiérarchie de navigation qui ajoute automatiquement des séparateurs via CSS.
Exemple
Utilisez une liste ordonnée ou non ordonnée avec des éléments de liste liés pour créer un fil d'Ariane au style minimal. Utilisez nos utilitaires pour ajouter des styles supplémentaires si vous le souhaitez.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>Diviseurs
Les séparateurs sont automatiquement ajoutés en CSS via ::before et content. Ils peuvent être modifiés en modifiant une propriété personnalisée CSS locale --bs-breadcrumb-divider, ou via la $breadcrumb-divider Sass variable — et $breadcrumb-divider-flipped pour son homologue RTL, si nécessaire. Nous utilisons par défaut notre variable Sass, qui est définie comme solution de repli à la propriété personnalisée. De cette façon, vous obtenez un diviseur global que vous pouvez remplacer sans recompiler CSS à tout moment.
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>Lors de la modification via Sass, la fonction quote est nécessaire pour générer les guillemets autour d'une chaîne. Par exemple, en utilisant >comme diviseur, vous pouvez utiliser ceci :
$breadcrumb-divider: quote(">");
Il est également possible d'utiliser une icône SVG intégrée . Appliquez-le via notre propriété personnalisée CSS ou utilisez la variable Sass.
<nav style="--bs-breadcrumb-divider: url("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='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>$breadcrumb-divider: url("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='currentColor'/%3E%3C/svg%3E");
You can also remove the divider setting --bs-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;.
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>$breadcrumb-divider: none;
Accessibilité
Étant donné que les fils d'Ariane fournissent une navigation, il est judicieux d'ajouter une étiquette significative telle que aria-label="breadcrumb" pour décrire le type de navigation fourni dans l'
For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.
Sass
Variables
$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote("/");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;