Pa ratllat

Exemple

Utilitzeu una llista ordenada o no ordenada amb elements de llista enllaçats per crear una ruta de navegació amb un estil mínim. Utilitzeu les nostres utilitats per afegir estils addicionals segons vulgueu.

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

Divisors

Els divisors s'afegeixen automàticament en CSS mitjançant ::beforei content. Es poden canviar modificant una propietat personalitzada CSS local --bs-breadcrumb-dividero mitjançant la $breadcrumb-dividervariable Sass, i $breadcrumb-divider-flippedper a la seva contrapartida RTL, si cal. Per defecte, utilitzem la nostra variable Sass, que s'estableix com a alternativa a la propietat personalitzada. D'aquesta manera, obteniu un divisor global que podeu substituir sense recompilar CSS en qualsevol 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>

Quan es modifica mitjançant Sass, la funció de quotes és necessària per generar les cometes al voltant d'una cadena . Per exemple, utilitzant >com a divisor, podeu utilitzar això:

$breadcrumb-divider: quote(">");

També és possible utilitzar una icona SVG incrustada . Apliqueu-lo mitjançant la nostra propietat personalitzada CSS o utilitzeu 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>");

També podeu eliminar la configuració del divisor --bs-breadcrumb-divider: '';(les cadenes buides a les propietats personalitzades CSS compten com a valor) o establir la variable Sass a $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;

Accessibilitat

Atès que les mides de navegació proporcionen una navegació, és una bona idea afegir una etiqueta significativa com aria-label="breadcrumb"per descriure el tipus de navegació proporcionada a l' <nav>element, així com aplicar una aria-current="page"a l'últim element del conjunt per indicar que representa la pàgina actual.

Per obtenir més informació, consulteu el patró de ruta de navegació de la Guia de pràctiques d'autorització d'ARIA .

CSS

Les variables

Com a part de l'evolució de l'enfocament de les variables CSS de Bootstrap, ara les breadcrumbs utilitzen variables CSS locals activades per .breadcrumba una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

  --#{$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 Sass

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