Ankernavigation

Hauptkapitel
Designsystem
Unterkapitel
Navigation
Gilt für
Websites & Webapplikationen (mit Login)

Darstellung und Verhalten

  • Die Ankernavigation ist linksbündig zum Inhalt
  • Hat es mehr Einträge als Platz (bspw. auf Mobile oder auch auf Desktop bei sehr vielen Einträgen), dann werden die Einträge, die keinen Platz mehr haben, abgeschnitten und ein Pfeil für das seitliche Scrollen angezeigt
  • Der aktive Eintrag wird hervorgehoben.
    • Beim Scrollen der Seite wird der Eintrag hervorgehoben, dessen Inhalt in dem Moment sichtbar ist
  • Bei Klick auf einen Eintrag scrollt die Seite zum zugehörigen Inhalt
  • Die Ankernavigation ist immer sichtbar. Sie ist zusammen mit der Hauptnavigation im Header am oberen Rand des Browserfensters fixiert.

Verwendung

Bei längeren Inhaltsseiten empfiehlt sich der Einsatz einer Ankernavigation. Die Ankernavigation dient als Inhaltsverzeichnis für eine lange Seite. Sie bietet Nutzenden einen raschen Überblick über den Inhalt der Seite. Dank der Ankernavigation können Nutzende direkt zu den für sie relevanten Inhaltsabschnitten springen.

Wir binden die Ankernavigation fix auf folgenden Seitentypen ein: Themenseite, Direktionsseite, Amtsseite, Schwerpunktseite, Einzelseite, Inhaltsseite.

Die Ankernavigation zeigt die Zwischentitel mit der Stufe H2 auf der Seite an. Wir blenden die Ankernavigation erst ab 3 oder mehr Zwischentiteln (H2) ein.

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch