Scrollbare Navigation / Mega Flyout / Content App Navigation

Die Navigation ermöglicht eine klare Orientierung auf der Website und führt Nutzer schnell zu ihrem Ziel. Im Mobile-Bereich ist das Main Menu über ein Hamburger-Icon als Accordion (vertikal) erreichbar, im Desktop über ein Megaflyout mit frei benennbaren Buttons. Alle Inhalte sollten innerhalb von zwei Klicks zugänglich sein.

Vorteile für Nutzer und Redakteure

Vorteile für Ihre Kunden

Die Flayout Navigation bietet dem Kunden ziegruppenspezifischen Einstieg. Statt lange zu suchen, erhalten sie eine klare Übersicht über Privatkunden, Firmenkunden oder bspl. Kundenportal. Intuitive Bedienung ist durch Scrollbarkeit geprägt und bietet insbesondere den mobile Nutzern Vorteile.

Mehr Inhalte ohne Überladung, denn viele Menüpunkte sind möglich

Schnellere Orientierung und Intuitive Bedienung

Zielgruppeneistiege für Privat- und Firmenkunden oder z. B. Barrierefreiheit, Portale, Kampagnen) lassen sich leichter einbauen

Vorteile für Redakteure

Die Flyout Navigation bietet volle Flexibilität bei Struktur und Darstellung. Inhalte lassen sich in bis zu drei Ebenen gliedern und mit Icons (Icon-Font oder SVG) sowie Label ergänzen. Das Element ist responsiv und Styles können mandantenweit einheitlich festgelegt werden.

Mehr Flexibilität im Inhalt: mehr Menüpunkte möglich ohne harte Limitierung und auch längere Labels oder zusätzliche Links integrierbar

Einfachere Pflege und Inhalte können nach Relevanz priorisiert werden, ohne Platzprobleme

Erweiterbarkeit: Navigation kann wachsen (z. B. neue Produkte, Services) einfache Integration von Zusatzlinks

Bitte beachten Sie: Die dargestellten Beispiele sind fiktiv und dienen ausschließlich der Veranschaulichung.

Beispiel zur Umsetzung

Die Flyout-Navigation dient als zentraler Einstiegspunkt und bietet eine strukturierte Orientierung über alle wichtigen Inhalte der Website.
Sie eignet sich besonders, um Nutzer schnell zwischen unterschiedlichen Bereichen zu führen – etwa über separate Zielgruppeneinstiege für Privat- und Firmenkunden im Desktop.

Ergänzend können wichtige Inhalte wie Barrierefreiheit, leichte Sprache oder externe Angebote (z. B. Newsroom) über Crosslinks integriert werden. In der mobilen Ansicht sind diese Elemente gebündelt im Main Menu Flyout zugänglich.

Für die redaktionelle Pflege wird die Komponente Navigation außerhalb des Hauptinhaltes und somit auch eines Containers im Basistemplate ausgewählt. Die Inhalte selbst werden in der Content App Navigation (Bereich Navigation Links) angelegt und bearbeitet.

Hinweis: Die Sichtbarkeit und Funktion des Scrollbalkens wurden mit Fokus auf Usability und Barrierefreiheit verbessert . Die native Funktion der Browser wurde ausgehebelt und wird überschrieben. Dadurch ist gewährleistet, dass der Scrollbalken immer angezeigt wird, sobald Menüpunkte aus dem Sichtfeld laufen.

Hinweise zur Anwendung

Die Flyout Navigation eignet sich ideal für

Typische Anwendungsfälle im Versicherungsumfeld sind:

Redaktionelle Hinweise

Checkliste: So pflegen Sie die Flayout Navigation richtig

Mit der Flayout Navigation können Sie Inhalte flexibel strukturieren und in mehreren Ebenen darstellen. Gehen Sie bei der Pflege wie folgt vor:

Content Backend in der App "Navigation" angelegt werden

Klick auf die App Navigation. Klick auf "Navigation hinzufügen" in der Funktionsbar.

Beim Label wird ein Name für die Navigation eingegeben. Bei der Variante wird ausgewählt, wo der Navigation platziert werden sollte: im Header oder unter dem Header

Bei der Generationsart stehen automatisch (Default) oder manuelle Versionen zur Verfügung Bei der automatischen Version werden alle Menüpunkte automatisch aus dem Seitenbaum angezeigt. manuell: Alle Menüpunkte können unabhängig vom Seitenbaum manuell angelegt werden.

"Navigation Menu hinzufügen" klicken und die Felder befüllen.

Innerhalb den Menüpunkten können beliebig viele Navigationslinks hinzugefügt werden

Es ist auch möglich ein Navigationslink direkt in der Navigation hinzuzufügen (die Pflege ist genau wie für Navigationslinks innerhalb dem Menüpunkt).

Dos

Einfacher, intuitiver Aufbau der Navigation

Abbild einer erwartungskonformen Struktur einer Versicherungswebsite

Übersichtlichkeit der Inhalte schaffen durch nachvollziehbare Sortierung und Ordnung

max sieben Links pro "Kategorie" / "Thema" für eine bessere Usability

kurze Labels

Nutzung von Headlines oder Verteilerseiten für eine bessere Kategorisierung

konsistente Nutzung von Icons für die selbe Art von Button und Links

Don'ts

Überladung der Navigation

zu viele Links

unverständliches Versicherungs-Jargon

zu lange Produktnamen

fehlender Übersichtsseiten zu Kategorien

Dopplungen

Meta-Navigation über dem Unternehmens-Logo verkleinert den Content Bereich, da der Header in der Höhe mehr Platz einnimmt

Weitere Informationen und eine detaillierte Anleitung finden Sie in unserem Redaktionsguide.

Zum Redaktionsguide Content App Navigation

Individuelle Beratung zur Content App Navigation

Ob Produktauswahl, Service-Suche oder Informationsangebote: Wir unterstützen Sie dabei, die Level Navigation optimal einzusetzen. Sprechen Sie uns an – wir beraten Sie gerne zu den passenden Use Cases und zeigen, wie Sie Inhalte für Ihre Kunden noch nutzerfreundlicher strukturieren können.

Jetzt beraten lassen