Miette de pain

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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

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 le fil d'Ariane ARIA Authoring Practices Guide .

CSS

variables

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les fils d'Ariane utilisent désormais des variables CSS locales .breadcrumbpour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  

Variables SSS

$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;