Seitenspaltennavigation
Auf dieser Seite
Darstellung und Verhalten
Varianten
Applikation
Der Seitenspaltennavigation besteht aus:
- 2 bis 7 Level 1 Navigationslinks2 bis 7 Level 2
- Navigationslinks (Optional)
Desktop Verhalten
Die Seitenspaltennavigation wird für grosse Screens auf der linken Seite angezeigt.
- Der aktive Eintrag wird in der Akzentfarbe hervorgehoben
- Bei Klick auf einen Level 1 Eintrag können optional mehrere Level 2 Einträge angezeigt werden.
- Level 2 Einträge werden direkt unterhalb des gewählten Level-1-Eintrags aufgelistet.
- Es ist jeweils nur ein Level 1 Eintrag offen. Klickt der Nutzer auf einen anderen Level 1 Eintrag wird der vorangegangene wieder geschlossen.
- Jeder Eintrag kann optional mit Notifikation in Form eines Punktes markiert werden.
Mobile Verhalten
Bei Klick auf das Menü-Icon öffnet sich das Navigations-Flyout.
Das Flyout besteht aus:
- Icon zum Schliessen
- Suche (optional)
- Login (optional)
- Navigationsliste mit Level 1 Einträgen
- 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 mit Link auf die zugehörige Seite des geklickten Eintrags: per Klick wird die entsprechende Seite geöffnet
- Navigationsliste mit Level 2 Seiten des gewählten Eintrags: per Klick wird die entsprechende Seite geöffnet
- Links Metanavigation zB. Hilfe, Kontakt (optional)
- Jeder Navigationeintrag kann optional mit Notifikation in Form eines Punktes markiert werden.
Bei Klick auf die Anmeldeoption wird zum Login weitergeleitet.
Bei Klick auf die Suche wird die Suchmaske angezeigt (siehe Filtern und Suchen).
Verwendung
Für die Seitenspaltennavigation nutzen wir das Zweispalten-Layout.
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, überlegen wir von Fall zu Fall, 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 Seiten innerhalb der Seitenstruktur von zh.ch genutzt werden.
Kontakt
Digitale Verwaltung - ZHweb
Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!