Breadcrumb-Navigation

Breadcrumb-Navigation hilft dem Benutzer, seine Position auf der Website zu verstehen, indem sie eine breadcrumb-Spur zurück zur Startseite bietet. Die Elemente werden typischerweise inline angezeigt, mit einem Trennzeichen zwischen jedem Element, das die Hierarchie zwischen den einzelnen Seiten anzeigt.

Links werden inline mit Trennzeichen angezeigt

Anforderungen

Stellen Sie die Hierarchie der Website dar, indem Sie Links inline anzeigen, mit einem Trennzeichen zwischen den Elementen, das die Hierarchie zwischen den einzelnen Seiten anzeigt, wobei die aktuelle Seite zuletzt erscheint.

Rezept

Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:

html
<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Type</a></li>
    <li><span aria-current="page">Product</span></li>
  </ol>
</nav>
css
body {
  font: 1.2em sans-serif;
}

.breadcrumb {
  padding: 0 0.5rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: end;
}

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  margin: 0 0.25rem;
  content: "→";
}

Hinweis: Das obige Beispiel verwendet einen komplexen Selektor, um vor jedem li Element außer dem letzten Inhalt einzufügen. Dies könnte auch durch einen komplexen Selektor erreicht werden, der alle li-Elemente mit Ausnahme des ersten anspricht:

css
.breadcrumb li:not(:first-child)::before {
  content: "→";
}

Wählen Sie die Lösung, die Ihnen besser gefällt.

Getroffene Entscheidungen

Um Listenelemente inline darzustellen, verwenden wir das Flexbox-Layout und zeigen so, wie eine CSS-Zeile unsere Navigation darstellen kann. Die Trennzeichen werden mithilfe von CSS generiertem Inhalt hinzugefügt. Sie können diese in ein beliebiges Trennzeichen ändern, das Ihnen gefällt.

Barrierefreiheitsaspekte

Wir haben die Attribute aria-label und aria-current verwendet, um Benutzern von unterstützenden Technologien zu helfen, zu verstehen, was diese Navigation ist und wo sich die aktuelle Seite in der Struktur befindet. Weitere Informationen finden Sie unter den verwandten Links.

Beachten Sie, dass die über die content CSS-Eigenschaft hinzugefügten Trennpfeile → aus dem obigen Beispiel an unterstützende Technologien (AT) weitergegeben werden, einschließlich Bildschirmlesern und Brailledisplays. Für eine ruhigere Lösung verwenden Sie ein dekoratives <img> in Ihrem HTML mit einem leeren alt-Attribut. Eine ARIA role, die auf none oder presentation gesetzt ist, verhindert ebenfalls, dass das Bild an AT übermittelt wird.

Alternativ können Sie den CSS generierten Inhalt zum Schweigen bringen, indem Sie als Alternativtext eine leere Zeichenfolge einschließen, gefolgt von einem Schrägstrich (/); zum Beispiel content: url("arrow.png") / "";.

Falls generierte Trennzeichen enthalten sind, die an AT übermittelt werden, wählen Sie die Erstellung des generierten Inhalts mit dem Pseudo-Element-Selektor ::after anstelle von ::before, sodass der Trenninhalt nach dem HTML-Inhalt und nicht davor angesagt wird.

Siehe auch