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. (Siehe Anmelden).

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

Header und Hauptnavigation sind in der Akzentfarbe der Seite.

Applikationen

Der Header besteht aus:

  • Logo des Kantons
  • der Breadcrumb-Navigation (Thema, Name der Applikation)
  • Links (optional)
  • Login (optional)
  • Suche (optional)
  • Menü-Icon für kleine Screens (optional)

Der Header ist in der Akzentfarbe der Seite.

Die Hauptnavigation für Applikationen wird für grosse Screens auf der linken Seite angezeigt.

  • Der aktive Eintrag wird hervorgehoben
  • Level 2 wird direkt unterhalb des gewählten Level-1-Eintrags angezeigt

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 nutzen wir nur für Applikationen. Über die Links im Header können Inhaltsseiten in der Applikation verlinkt werden, wie bspw. Hilfe oder Kontakt.

Für die Hauptnavigation von Applikationen nutzen wir die linke Navigation. Bei kleinen Screens ist die Navigation über ein Menü-Eintrag im Applikations-Header zugänglich. Die Navigation bildet die Level 1 und 2 ab. Die Seiten auf Level 3 werden mit einer Reiternavigation oder in einem Modal angezeigt. Das Modal hat einen Zurück-Link auf die Elternseite (Level 2).

Gibt es noch weitere Levels, so ist von Fall zu Fall zu überlegen, wie die Navigation gebaut werden kann. Wir empfehlen, in diesem Fall die Staatskanzlei zu kontaktieren. Beispiele für eine Navigation, die über das zweite Level hinausgeht, finden sich in der Applikation PrivateTax (Steuererklärung).

Die linke Navigation ist ausschliesslich für Applikationen gedacht. Sie darf nicht für Inhaltsseiten genutzt werden.

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch