Breadcrumb Brotkrümel
Einführung
Die Breadcrumb-Komponente ist eine Navigationshilfe, die den Standort der aktuellen Seite innerhalb einer hierarchischen Struktur der Website anzeigt. Sie hilft Benutzern, ihren Pfad von der Startseite zurück zur aktuellen Position zu verfolgen und sich leicht nach oben durch die Hierarchie zu navigieren.
Der Breadcrumb ist vollständig als breadcrumb-Block im Page Builder integriert, sodass Redakteure und Entwickler visuelle Stile, Trennzeichen und responsive Größen direkt im CMS konfigurieren können.
Verwendung
Diese Beispiele veranschaulichen, wie Redakteure Navigationskomponenten binden und strukturieren.
1. Standard-Navigations-Brotkrümel
Eine klassische hierarchische Brotkrümel-Konfiguration, die Startseite, sekundäre Kategorie und terminales Textseiten-Markierung zeigt.
{
"type": "breadcrumb",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Components", "href": "/components" },
{ "label": "Breadcrumb" }
]
}
2. Benutzerdefiniertes Trennzeichen (Schrägstrich)
Verwendet ein benutzerdefiniertes Texttrennzeichen (wie einen Schrägstrich "/") zwischen den Navigationspunkten.
{
"type": "breadcrumb",
"separator": "/",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Library", "href": "/library" },
{ "label": "Overview" }
]
}
3. Betonte Größe & visueller Stil
Passt die Gesamtgröße auf klein an und wendet einen angepassten visuellen Unterstrich-Stil für ein hervorgehobenes Layoutgefühl an.
{
"type": "breadcrumb",
"variant": "underline",
"size": "sm",
"items": [
{ "label": "Console", "href": "/console" },
{ "label": "Resources", "href": "/console/resources" },
{ "label": "Deployments" }
]
}
Eigenschaften
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Trennzeichen (separator) | string | "chevron-right" | Benutzerdefiniertes Zeichen-Trennzeichen zwischen den Elementen. |
Visueller Stil (variant) | select | "plain" | Die visuelle Gestaltung der Links. • Optionen: "plain", "underline". |
Größenstufe (size) | select | "md" | Steuert Gesamtschrift und Chevron-Skalierung. • Optionen: "xs", "sm", "md", "lg". |
Navigationselemente (items) | list | [] | Geordnete Sammlung von Seitenelementen. (Siehe Schema der Brotkrümel-Elemente unten). |
Benutzerdefinierte Klasse (class) | string | - | Benutzerdefinierte CSS-Klassenüberschreibungen, direkt auf den Brotkrümel-Container angewendet. |
Schema der Brotkrümel-Elemente
Jeder Eintrag im items-Array akzeptiert folgende Parameter:
| Eigenschaft | CMS-Feldtyp | Erforderlich | Beschreibung |
|---|---|---|---|
Anzeigetext (label) | string | Ja | Für das Elementsegment gerenderter Label-Text. |
Zielroute (href) | string | Nein | Ziel-URL oder Seitenroute. Wenn weggelassen, wird als einfacher Text der aktuellen Seite gerendert. |
Aktuelle Seite (current) | boolean | false | Markiert das Element als aktive Seite (automatisch true für das letzte Element). |
Entwicklerhinweise & Barrierefreiheit
- ARIA-konforme Hierarchie: Die Komponente wird automatisch innerhalb eines barrierefreien semantischen Navigationselements gerendert (
<nav aria-label="Breadcrumb">). - Aktuelle Seite ARIA: Das finale terminale Element (wo
hrefweggelassen odercurrentgesetzt ist) erhält automatischaria-current="page", um den Richtlinien für Screenreader-Barrierefreiheit zu entsprechen. - Micro-Interaction-Styling: Links erben automatisch Layout-Hover-Auslöser und Übergänge und spiegeln die Akzentfarben der übergeordneten Palette sanft wider.