Miette de pain

Indiquez l'emplacement de la page actuelle dans une hiérarchie de navigation qui ajoute automatiquement des séparateurs via CSS.

Sur cette page

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 ::beforeet content. Ils peuvent être modifiés en modifiant une propriété personnalisée CSS locale --bs-breadcrumb-divider, ou via la $breadcrumb-dividervariable Sass — et $breadcrumb-divider-flippedpour 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(&#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='currentColor'/%3E%3C/svg%3E&#34;);" 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");

Vous pouvez également supprimer le paramètre de diviseur --bs-breadcrumb-divider: '';(les chaînes vides dans les propriétés personnalisées CSS comptent comme une valeur) ou définir la variable Sass sur $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' <nav>élément, ainsi que d'appliquer un aria-current="page"au dernier élément de l'ensemble pour indiquer qu'il représente la page actuelle.

Pour plus d'informations, consultez WAI-ARIA Authoring Practices for the breadcrumb pattern .

Toupet

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;