Breadcrumbs Navigation

Die Breadcrumbs Komponente bietet eine sekundäre Navigation, die dem Benutzer seine Position innerhalb der Website-Hierarchie anzeigt. Sie ist besonders nützlich für Websites mit einer tief gegliederten Struktur.

Breadcrumbs sollten, sobald sie implementiert sind, auf allen Seiten einheitlich verwendet werden. Websites mit nur zwei Ebenen (z. B. Übersicht → Details) benötigen in der Regel keine Breadcrumbs.

WCAG AA
HTMX

Funktionen

  • Hierarchische Navigation: Zeigt den Pfad von der Startseite zur aktuellen Seite an.

  • Optionale Icons: Zu den Elementen können Icons hinzugefügt werden (in der Regel ein Home-Symbol für das erste Element).

  • HTMX-Unterstützung: Optionale AJAX-Navigation für das Verhalten einer Single-Page-Anwendung.

HTML

Verwendung

Die Komponente wird über das breadcrumbs Tag eingebunden.

{% load insight_tags %} {% breadcrumbs config=breadcrumbs_config %} <!-- or --> {% breadcrumbs config=breadcrumbs_items %}

Parameter

Laden…
Name Typ Beschreibung Standardwert Erforderlich

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Komponente verwendet ein <nav> Tag mit dem entsprechenden aria-label='Breadcrumb'.

  • Das aktive Element besitzt das Attribute aria-current='page'.

  • Die Breadcrumb-Elemente sind als semantische Liste strukturiert (<ul>, <li>).

  • Chevron-Icons als Trennzeichen übernehmen den Attributwert aria-hidden='true' von der Icon-Komponente.

Verwandte Themen

  • Keine verwandten Komponenten vorhanden.