Breadcrumb

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Navigations-Pfad, Brotkrümel-Navigations-Pfad

Beschreibung: Die Breadcrumb-Komponente visualisiert den Navigations-Pfad zur aktuellen Position innerhalb einer hierarchischen Seitenstruktur. Sie ermöglicht es Nutzer:innen, ihre genaue Position zu sehen und schnell zu übergeordneten Seiten zurückzukehren.

Beispiel

Darstellung der Komponente mit den grundlegenden Eigenschaften und navigierbaren Links:

<KolBreadcrumb _label="Breadcrumb" _links={[{"_label":"Startseite","_href":"#/","_icons":"kolicon-house","_hideLabel":true},{"_label":"Unterseite 1","_href":"#/page-1"},{"_label":"Unterseite 1.1","_href":"#/page-1-1"},{"_label":"Unterseite 1.1.1","_href":"#/page-1-1-1"},{"_label":"Aktuelle Seite","_href":"#/current"}]} />

Barrierefreiheit

• Die Breadcrumb-Komponente ist ein wichtiges Element für die Suchmaschinenoptimierung und die Navigation auf Ihrer Webseite.
• Das Attribut _label muss korrekt gesetzt werden und beschreibt den Zweck der Navigations-Komponente für Screenreader-Nutzer:innen.
• Das letzte Element in der Breadcrumb-Navigation stellt die aktuelle Seite dar und ist nicht mit einem Link versehen.
• Alle vorherigen Elemente bieten navigierbare Links zu übergeordneten Seiten.
• Das letzte Element kann dennoch mittels Tab-Taste erreicht werden, um es von Screenreadern vorlesbbar zu machen.
• Bei der Verwendung von Icons mit _hide-label muss eine aussagekräftige _label auf der primären Komponente gesetzt sein, um Zugänglichkeit zu gewährleisten.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Springt die einzelnen Link-Elemente der Breadcrumb-Navigation an.
Enter	Öffnet den Link des aktuell fokussierten Elements.

Best Practices / Empfehlungen

• Positionieren Sie die Breadcrumb-Komponente weit oben auf der Seite, damit sie von Suchmaschinen und Nutzer:innen leicht erkannt wird.
• Nutzen Sie die Breadcrumb-Navigation konsistent auf allen Inhaltsseiten Ihrer Webseite – dies verbessert die Orientierung.
• Vermeiden Sie die Breadcrumb-Navigation auf Ihrer Startseite, da dort keine hierarchische Position vorhanden ist.
• Verwenden Sie aussagekräftige Beschriftungen (_label) für jedes Element, die die Position in der Struktur deutlich machen.
• Nutzen Sie optional Icons (z.B. ein Haus-Icon für „Startseite"), um die Navigation intuitiver zu gestalten. Kombinieren Sie Icons immer mit Text-Labels außer für sehr gebräuchliche Symbole.
• Stellen Sie sicher, dass beim Einsatz von _hide-label: true dennoch eine zugängliche Beschreibung vorhanden ist.
• Auf mobilen Geräten gilt: Eine Breadcrumb-Navigation bietet nur Mehrwert, wenn ausreichend Platz vorhanden ist und die Links tastbar sind.

Anwendungsfälle

• News-Archive oder Blogs: Darstellung von Kategorie-Hierarchien (z.B. Blog → Kategorie → Artikel)
• E-Commerce: Navigation durch Produkt-Kategorien (z.B. Startseite → Kategorie → Unterkategorie → Produkt)
• Dokumentations-Websites: Aufbau von Dokumentations-Strukturen (z.B. Dokumentation → Kapitel → Unterkapitel)
• Informationsportale: Orientierung innerhalb umfangreicher Inhaltsstrukturen
• mehrstufige Formulare oder Workflows: Anzeige des Fortschritts durch verschiedene Schritte einer Anwendung

Konstruktion / Technik

Playground

<KolBreadcrumb _label="Breadcrumb" _links={[{"_label":"Startseite","_href":"#/","_icons":"kolicon-house","_hideLabel":true},{"_label":"Unterseite 1","_href":"#/page-1"},{"_label":"Unterseite 1.1","_href":"#/page-1-1"},{"_label":"Unterseite 1.1.1","_href":"#/page-1-1-1"},{"_label":"Aktuelle Seite","_href":"#/current"}]} />

Funktionalitäten (mit Code)

Basis-Breadcrumb mit Links

Die Breadcrumb-Navigation wird über das Attribut _links als Array von Link-Objekten konfiguriert. Das letzte Element wird automatisch als aktuelle Seite (ohne Link) behandelt.

<KolBreadcrumb _label="Breadcrumb" _links={[{"_label":"Startseite","_href":"#/","_icons":"kolicon-house","_hideLabel":true},{"_label":"Unterseite 1","_href":"#/page-1"},{"_label":"Unterseite 1.1","_href":"#/page-1-1"},{"_label":"Unterseite 1.1.1","_href":"#/page-1-1-1"},{"_label":"Aktuelle Seite","_href":"#/current"}]} />

Link-Eigenschaften:

Eigenschaft	Typ	Beschreibung
_href	string	Die URL oder der Link-Ziel für dieses Element (außer beim letzten Element).
_label	string	Der sichtbare Text-Label des Elements.
_icons	string	(Optional) Der Name eines verfügbaren Icons (z.B. kolicon-house oder Font Awesome Symbole).
_hide-label	boolean	(Optional) Wenn true, wird nur das Icon angezeigt und der Text verborgen. Erfordert das Setzen von _icon.

Icons in der Breadcrumb

Icons können optional zu jedem Element hinzugefügt werden. Eine häufige Verwendung ist ein Haus-Icon für die Startseite:

<KolBreadcrumb _label="Breadcrumb" _links={[{"_label":"Startseite","_href":"#/","_icons":"kolicon-house","_hideLabel":true},{"_label":"Unterseite 1","_href":"#/page-1"},{"_label":"Unterseite 1.1","_href":"#/page-1-1"},{"_label":"Unterseite 1.1.1","_href":"#/page-1-1-1"},{"_label":"Aktuelle Seite","_href":"#/current"}]} />

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Ein Link-Element wird geklickt.	—

API

Overview

The Breadcrumb component can be used to display the path to the current position of a web page within a hierarchical structure.

Properties

Property	Attribute	Description	Type	Default
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_links (required)	_links	Defines the list of links combined with their labels to render.	BreadcrumbLinkProps[] | string	undefined

---