← Zurück zum Überblick

Cross-Level-Navigation

Vier Navigationskomponenten verbinden alle Seiten — vertikal, horizontal und quer durch die Hierarchie

Auf dieser Seite
01Vier Navigationskomponenten 02Breadcrumbs — Der Hierarchiepfad 03Deep-Dive-Links — Tiefer navigieren 04Sibling-Navigation — Geschwister-Seiten 05Audience-Switch & Sprachlinks
01

Vier Navigationskomponenten

Jede generierte Seite enthält bis zu vier Navigationskomponenten, die zusammen ein lückenloses Netz bilden. Keine Seite ist eine Sackgasse — der Nutzer kann immer nach oben, unten, seitwärts oder zurück navigieren.

📍
Breadcrumbs
Zeigen den Hierarchiepfad: Von der L0-Übersichtsseite über L1 bis zur aktuellen Seite. Jedes Segment ist ein Link nach oben.
Position: Navigationsleiste
🧭
Deep-Dive-Links
Führen eine Ebene tiefer. Auffällig gestaltet mit orangem Rand. Nur sichtbar, wenn die Zielseite existiert.
Position: Sektionsende
↔️
Sibling-Navigation
Pill-Links zu allen Seiten auf der gleichen Ebene. Aktuelle Seite ist orange hervorgehoben. Am Seitenende platziert.
Position: Seitenende
⬅️
Back-Button
Dezenter Link im Hero-Bereich, führt zur übergeordneten Seite. Immer sichtbar auf L1-L3-Seiten.
Position: Hero-Sektion
L0 Entwickler › L1 Thema 🇩🇪 🇬🇧
① Breadcrumb (Navigationsleiste)
Fester Bestandteil der oberen Leiste — immer sichtbar
② Back-Button (Hero)
← Zurück zum Überblick
③ Deep-Dive-Link (Sektionsende)
MEHR ERFAHREN
Thema im Detail →
→
④ Sibling-Navigation (Seitenende)
01 Thema A 02 Aktuell 03 Thema C
02

Breadcrumbs — Der Hierarchiepfad

Breadcrumbs erscheinen auf allen L1-, L2- und L3-Seiten in der fixen Navigationsleiste. Sie zeigen den vollständigen Pfad von der L0-Übersichtsseite bis zur aktuellen Seite. Jedes Segment ist ein klickbarer Link — außer die aktuelle Seite.

Format-Beispiele

L0 Entwickler › L1 Navigation
L0 Entwickler › L1 Orchestrator › L2 Phasen-Detail

Designregel: Die Level-Badges (L0, L1, L2, ...) sind klein und dezent gestaltet. Sie sind die einzige Stelle, an der Level-Nummern für den Nutzer sichtbar sind — in Titeln, Überschriften und Linklabels tauchen sie nicht auf.

03

Deep-Dive-Links — Tiefer navigieren

Deep-Dive-Links laden den Nutzer ein, ein Thema auf der nächsttieferen Ebene zu erkunden. Sie haben einen orangenen linken Rand und einen warmen Hintergrund. Aber: Ein Deep-Dive-Link wird nur angezeigt, wenn zwei Bedingungen erfüllt sind.

✅
Bedingung 1: Seite existiert
Die Zielseite auf dem nächsten Level muss tatsächlich gebaut worden sein. Ein Deep-Dive-Link zeigt niemals ins Leere.
✅
Bedingung 2: Tiefenprofil erlaubt es
Das Tiefenprofil der Zielgruppe muss das nächste Level zulassen. Kein Deep-Dive über das Maximum der Zielgruppe hinaus.

Label-Varianten (statt „Deep Dive L2“)

MEHR ERFAHREN Standard-Label für allgemeine Vertiefungen
IM DETAIL Für technische Detailseiten
ALLES SCHRITT FÜR SCHRITT Für Tutorials und Anleitungen

So sieht ein Deep-Dive-Link live aus (aus der Orchestrator-Seite):

Im Detail Phasen-Steuerung im Detail → Interne Zustandsmaschine, Fehlerbehandlung und Abbruchbedingungen
→
<!-- Deep-Dive-Link HTML-Struktur --> <a href="../l2/thema_dev_de.html" class="deep-dive-link"> <div class="deep-dive-content"> <span class="deep-dive-label">Mehr erfahren</span> <span class="deep-dive-title">Thementitel &rarr;</span> <span class="deep-dive-desc">Kurzbeschreibung</span> </div> <span class="deep-dive-arrow">&rarr;</span> </a> // CSS-Klassen: .deep-dive-link // Wrapper (<a>-Tag) .deep-dive-content // Textbereich (Flex-Column) .deep-dive-label // Oberes Label (Mono, Orange) .deep-dive-title // Titel (Display-Font) .deep-dive-desc // Beschreibung (optional) .deep-dive-arrow // Pfeil rechts // Styling: border-left 4px orange, // background surface-warm, hover-Effekt translateX(4px)

Deep-Dive-Link Aufbau: Ein <a>-Element mit der Klasse deep-dive-link enthält zwei Kinder: den deep-dive-content-Block (Label, Titel, optionale Beschreibung) und den deep-dive-arrow-Pfeil. Die wichtigsten visuellen Merkmale: 4px orangener linker Rand, warmer Hintergrund, und beim Hover verschiebt sich der gesamte Block leicht nach rechts.

04

Sibling-Navigation — Geschwister-Seiten

Die Sibling-Navigation erscheint am Ende jeder L1-, L2- und L3-Seite. Sie zeigt alle Seiten auf derselben Ebene als Pill-shaped Links. Die aktuelle Seite ist in Orange hervorgehoben — so sieht der Nutzer sofort, wo er sich befindet und was es noch gibt.

Live-Beispiel: So sieht die Sibling-Nav dieser Seite aus

01 Orchestrator 02 Helpfulness 03 Pipelines 04 Design-System 05 Navigation 06 Templates 07 QA

Zweck: Die Sibling-Nav ermöglicht horizontale Erkundung, ohne zurück zur übergeordneten Seite navigieren zu müssen. Der Nutzer kann direkt von „Orchestrator“ zu „Pipelines“ springen — beide sind L1-Geschwister unter dem gleichen Entwickler-L0.

<!-- Sibling-Navigation HTML-Struktur --> <div class="sibling-nav"> <div class="sibling-nav-title">Weitere Vertiefungsseiten</div> <div class="sibling-nav-items"> <!-- Andere Seiten: Links --> <a href="thema_dev_de.html" class="sibling-nav-link"> <span class="sibling-nav-num">01</span> Thema A </a> <!-- Aktuelle Seite: Span (kein Link) --> <span class="sibling-nav-link sibling-nav-current"> <span class="sibling-nav-num">02</span> Aktuell </span> </div> </div> // CSS-Klassen: .sibling-nav // Container (border-top) .sibling-nav-link // Pill-Button (border-radius: full) .sibling-nav-current // Orange Hervorhebung .sibling-nav-num // Nummerierung (Mono-Font)

Sibling-Nav Aufbau: Der Container .sibling-nav hat eine obere Trennlinie. Darin sind Flex-Wrapping-Pillen (.sibling-nav-link) als Links. Die aktuelle Seite verwendet ein <span> statt <a> und bekommt zusätzlich die Klasse .sibling-nav-current (orangener Hintergrund, weißer Text). Die Nummerierung nutzt Monospace-Font.

05

Audience-Switch & Sprachlinks

Zwei weitere Navigationselemente vervollständigen das System: Der Audience-Switch wechselt zwischen Zielgruppen, die Sprach-Flags wechseln zwischen Deutsch und Englisch. Beide verwenden relative Pfade — nie absolute URLs.

👥
Audience-Switch
Nur auf L0-Seiten. Zeigt Links zu den L0-Seiten aller anderen Zielgruppen in derselben Sprache. Beispiel: Von index_dev_de.html zu index_mgr_de.html.
Nur L0
🌐
Sprach-Flags
Auf jeder Seite. Verlinkt zur exakt gleichen Seite in der anderen Sprache. Immer relativ innerhalb desselben Ordners. Ein Klick auf 🇬🇧 wechselt z.B. von navigation_dev_de.html zu navigation_dev_en.html.
Jede Seite

Relative Pfad-Beispiele

// Sprachlinks (gleicher Ordner, gleiche Ebene) L0-Seite: index_dev_de.html → index_dev_en.html L1-Seite: navigation_dev_de.html → navigation_dev_en.html L2-Seite: breadcrumb-detail_dev_de.html → breadcrumb-detail_dev_en.html // Breadcrumb-Links (Ordner hoch, dann Ordner rein) L1 → L0: ../index_dev_de.html // Ein Ordner hoch L2 → L1: ../l1/orchestrator_dev_de.html // Hoch, dann in l1/ L2 → L0: ../index_dev_de.html // Hoch zum Root L3 → L2: ../l2/thema_dev_de.html // Hoch, dann in l2/ // Audience-Switch (nur L0, gleicher Ordner) Dev → Mgr: index_mgr_de.html // Gleicher Ordner Dev → User: index_user_de.html // Gleicher Ordner // Deep-Dive (immer in den nächsten Level-Ordner) L0 → L1: l1/orchestrator_dev_de.html // Unterordner L1 → L2: ../l2/phasen-detail_dev_de.html // Hoch, dann in l2/ L2 → L3: ../l3/detail_dev_de.html // Hoch, dann in l3/

Ordnerstruktur: L0-Seiten liegen im Root-Ordner (output/). L1-Seiten im Unterordner l1/, L2 in l2/, L3 in l3/. Alle relativen Pfade basieren auf dieser Struktur. Da Sprachversionen im gleichen Ordner liegen, ist der Sprachwechsel immer ein einfacher Dateiname-Tausch ohne Pfadnavigation.

✏️ Kurz getestet

Ein Deep-Dive-Link soll auf eine L2-Seite zeigen, aber die Zielgruppe ist 📊 Entscheider (maximale Tiefe: L1). Was passiert?

Der Link wird angezeigt, aber mit einem Warnhinweis versehen
Es wird kein Deep-Dive-Link angezeigt — kein Link ins Nichts
Der Link wird angezeigt und führt zur nächsten verfügbaren Seite
Weitere Vertiefungsseiten für Entwickler
01 Orchestrator 02 Helpfulness-Scoring 03 Pipelines 04 Design-System 05 Navigation 06 Templates 07 Qualitätssicherung