Header und Hauptnavigation

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

Darstellung und Verhalten

Varianten

Website

Der Header besteht aus:

  • Zwei Einträgen in der Hauptnavigation:
    • Themen
    • Organisation
  • Anmeldeoption
  • Suche

Bei Klick auf einen Hauptnavigationseintrag öffnet sich das Navigations-Flyout.

Das Flyout «Themen» besteht aus:

  • Icon zum Schliessen
  • Suchfeld: es werden alle verfügbaren Themenseiten durchsucht. Die Ergebnisse werden automatisch als Liste unter dem Suchfeld angezeigt. Die Navigationsliste wird ausgeblendet
  • Navigationsliste mit Einträgen auf Themenseiten (Variante «Themen»)
  • Bei Klick auf einen Eintrag in der Navigationsliste blättert der Inhalt im Flyout ein Level tiefer. Das Flyout besteht jetzt aus:
    • Zurück-Link: blättert ein Level höher
    • Titel des geklickten Eintrages
    • Link auf die zugehörige Themenseite des geklickten Eintrags: per Klick wird die entsprechende Seite geöffnet
    • Navigationsliste mit Kinderseiten des gewählten Eintrags: per Klick wird die entsprechende Seite geöffnet

Das Flyout «Organisation» besteht aus:

  • Icon zum Schliessen
  • Titel «Regierungsrat»
  • Text mit Link
  • Suchfeld: es werden alle verfügbaren Organisationsseiten durchsucht. Die Ergebnisse werden automatisch als Liste unter dem Suchfeld angezeigt. Die Navigationsliste wird ausgeblendet
  • Navigationsliste mit Einträgen auf die Direktionsseiten (Variante «Standard»)
  • Bei Klick auf einen Eintrag in der Navigationsliste blättert der Inhalt im Flyout ein Level tiefer. Das Flyout besteht jetzt aus:
    • Zurück-Link: blättert ein Level höher
    • Titel des geklickten Eintrages
    • Link auf die zugehörige Direktionsseite des geklickten Eintrags: per Klick wird die entsprechende Seite geöffnet
    • Navigationsliste mit Kinderseiten (Ämter) des gewählten Eintrags: per Klick wird die entsprechende Seite geöffnet
  • Teaser zu weiteren Inhalten (Kantonsrat, Gerichte, ...)
  • Bei Klick auf die Anmeldeoption wird die Anmeldung angezeigt.

Bei Klick auf die Suche wird die Suchmaske angezeigt (siehe Filtern und Suchen).

Header und Hauptnavigation sind in der Akzentfarbe der Seite.

Applikationen

Der Applikations-Header besteht aus:

  • Logo des Kantons
  • Name der Applikation
  • Links Metanavigation (optional)
  • Login (optional)
  • Suche (optional)
  • Menü-Icon (bei kleinen Screens)

Bei Klick auf die Anmeldeoption wird zum Login weitergeleitet.

Bei Klick auf das Logo des Kantons wird zur Startseite weitergeleitet.

Bei Klick auf die Suche wird die Suchmaske angezeigt (siehe Filtern und Suchen).

Über die Metanavigation im Header können Inhaltsseiten in der Applikation verlinkt werden, wie bspw. Hilfe oder Kontakt.

Der Header ist in der Akzentfarbe der Seite.

Mobile Verhalten

Bei kleinen Screens wird (sofern verwendet) die Seitenspaltennavigation als Menü in den Header integriert.

Bei Klick auf das Menü-Icon wird das Flyout geöffnet. Die Metanavigation wird ebenfals über das Flyout zugänglich gemacht (siehe Seitenspaltennavigation).

Verwendung

Website

Den Header mit der Hauptnavigation für die Website setzen wir nur auf dem kantonalen Webauftritt ein.

Applikationen

Den Header für Applikationen setzen wir nur bei eigenständigen Applikationen für Online Services ein, die aufgrund ihrer Komplexität nicht in die normale Seitenstruktur der Webseite Kanton Zürich integriert werden können.

Der Header kann für Applikationen mit Navigationsspalte oder für Applikationen ohne Navigationsspalte verwendet werden (siehe Seitenspaltennavigation).

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch