in English

Brotkrümel

Geben Sie die Position der aktuellen Seite innerhalb einer Navigationshierarchie an, die automatisch Trennzeichen über CSS hinzufügt.

Auf dieser Seite

Beispiel

Verwenden Sie eine geordnete oder ungeordnete Liste mit verknüpften Listenelementen, um einen minimal gestalteten Breadcrumb zu erstellen. Verwenden Sie unsere Dienstprogramme, um nach Bedarf zusätzliche Stile hinzuzufügen.

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

Teiler

Trennzeichen werden in CSS automatisch durch ::beforeund hinzugefügt content. Sie können durch Ändern einer lokalen benutzerdefinierten CSS-Eigenschaft --bs-breadcrumb-divideroder über die $breadcrumb-dividerSass-Variable geändert werden – und $breadcrumb-divider-flippedbei Bedarf für ihr RTL-Gegenstück. Wir verwenden standardmäßig unsere Sass-Variable, die als Fallback für die benutzerdefinierte Eigenschaft festgelegt wird. Auf diese Weise erhalten Sie einen globalen Teiler, den Sie jederzeit überschreiben können, ohne CSS neu zu kompilieren.

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

Beim Modifizieren über Sass wird die Quote -Funktion benötigt, um die Anführungszeichen um einen String herum zu erzeugen. Wenn Sie beispielsweise >als Teiler verwenden, können Sie Folgendes verwenden:

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

Es ist auch möglich, ein eingebettetes SVG-Symbol zu verwenden . Wenden Sie es über unsere benutzerdefinierte CSS-Eigenschaft an oder verwenden Sie die Sass-Variable.

<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");

Sie können auch die Teilereinstellung entfernen --bs-breadcrumb-divider: '';(leere Zeichenfolgen in benutzerdefinierten CSS-Eigenschaften zählen als Wert) oder die Sass-Variable auf $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;

Barrierefreiheit

Da Breadcrumbs eine Navigation bieten, ist es eine gute Idee, eine aussagekräftige Bezeichnung hinzuzufügen, z. B. aria-label="breadcrumb"um den im Element bereitgestellten Navigationstyp zu beschreiben , und ein auf das letzte Element des Satzes <nav>anzuwenden , um anzuzeigen, dass es die aktuelle Seite darstellt.aria-current="page"

Weitere Informationen finden Sie in den WAI-ARIA Authoring Practices für das Breadcrumb-Muster .

Sass

Variablen

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