Breadcrumb-Navigation

Breadcrumb-Navigation hilft dem Benutzer, ihre Position auf der Website zu verstehen, indem ein Breadcrumb-Pfad zurück zur Startseite bereitgestellt wird. Die Elemente werden typischerweise inline angezeigt, mit einem Trennzeichen zwischen jedem Element, das die Hierarchie zwischen den einzelnen Seiten angibt.

Links werden inline mit Trennzeichen angezeigt

Anforderungen

Zeigen Sie die Hierarchie der Website durch die Anzeige von Links inline an, mit einem Trennzeichen zwischen den Elementen, das die Hierarchie zwischen den einzelnen Seiten angibt, wobei die aktuelle Seite zuletzt erscheint.

Rezept

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

html
<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <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>
  </ul>
</nav>
css
body {
  font: 1.2em sans-serif;
}

.breadcrumb {
  padding: 0 0.5rem;
}

.breadcrumb ul {
  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 Inhalt einzufügen, außer vor dem letzten. Dies könnte auch durch einen komplexen Selektor erreicht werden, der auf alle li-Elemente außer dem ersten abzielt:

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

Sie können die Lösung wählen, die Sie bevorzugen.

Getroffene Entscheidungen

Um Listenelemente inline anzuzeigen, verwenden wir das Flexbox-Layout und zeigen somit, wie eine Zeile CSS uns unsere Navigation geben kann. Die Trennzeichen werden mit CSS-generiertem Inhalt hinzugefügt. Sie können diese in jedes beliebige Trennzeichen ändern, das Sie möchten.

Barrierefreiheitsbedenken

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

Beachten Sie, dass die Trennpfeile →, die über die content-CSS-Eigenschaft im obigen Beispiel hinzugefügt werden, unterstützenden Technologien (AT) zur Verfügung gestellt werden, einschließlich Bildschirmlesern und Braille-Displays. Für eine ruhigere Lösung verwenden Sie ein dekoratives <img> in Ihrem HTML mit einem leeren alt-Attribut. Ein ARIA role, das auf none oder presentation gesetzt ist, verhindert ebenfalls, dass das Bild AT zur Verfügung gestellt wird.

Alternativ können Sie den CSS-generierten Inhalt durch Hinzufügen eines leeren Strings als Alternativtext, gefolgt von einem Schrägstrich (/), stumm schalten; beispielsweise content: url("arrow.png") / "";.

Wenn Sie generierte Trennzeichen einfügen, die AT zur Verfügung gestellt werden, entscheiden Sie sich dafür, den generierten Inhalt mit dem ::after-Pseudoelement-Selektor anstelle von ::before zu erstellen, sodass der Trennzeicheninhalt nach dem HTML-Inhalt angekündigt wird, anstatt davor.

Siehe auch