Die Kontextnavigations-Komponente ist ein schmaler Navigationsstreifen mit frei definierbaren Links. Sie eignet sich besonders für lange Seiten, um Nutzer:innen eine schnelle Orientierung und direkte Sprungmarken anzubieten.
Innerhalb der Komponente kannst du:
mehrere Links anlegen
eine globale Titelgröße für alle Links festlegen (drei Größen zur Auswahl)
die Zielverlinkung frei definieren
das Farbschema anpassen
Alle üblichen Verlinkungsoptionen stehen zur Verfügung.
Die Kontextnavigation verhält sich „sticky“:
Sobald die Leiste beim Scrollen den oberen Rand der headful-Seite erreicht, bleibt sie dort fixiert und begleitet Nutzer:innen beim weiteren Scrollen durch die gesamte Seite. Dadurch bleibt die Navigation jederzeit sichtbar.
Deep Links & Einsatzbereich
Innerhalb einer Seite ist es besonders sinnvoll, die Links als Deep Links (Anchor-Verlinkungen) zu definieren. So können gezielt bestimmte Abschnitte angesteuert werden.
Die Kontextnavigations-Komponente eignet sich besonders für:
sehr lange Inhaltsseiten
FAQ-Bereiche
strukturierte Informationsseiten
Seiten mit klar getrennten Abschnitten
Tipps & Tricks
Verwende Deep Links konsequent, um eine klare Seitenstruktur abzubilden.
Lege die Titelgröße bewusst fest, da sie für alle Links der Komponente gilt.
Nutze das Farbschema, um die Navigation visuell vom restlichen Inhalt abzugrenzen.