Eine responsive Navigation kann auf unterschiedlichen Viewports eine vollkommen unterschiedliche Darstellung mit sich bringen. Auf einem großen Bildschirm können die wichtigsten Navigationspunkte beispielsweise dauerhaft horizontal sichtbar sein und auf kleineren Bildschirm in einem Menü-Button zusammengefasst werden. Die Informationsarchitektur sollte dabei möglichst nicht verändert werden. Auch sollte nicht plötzlich eine andere Reihenfolge entstehen.
Wie bereits im Kapitel “Semantik & Aufbau” behandelt, bleibt die HTML-Grundstruktur gleich und die visuelle Darstellung wird über CSS verändert. Wo zusätzliche Interaktionen nötig sind, wird sie um einen Button und JavaScript ergänzt.
Umgang mit wenig Platz
Wann eine Navigation ihre Darstellung verändern sollte, lässt sich nicht zuverlässig bestimmen, denn Smartphones, Tablets, Laptops und Desktop-Bildschirme existieren in zahlreichen unterschiedlichen Größen. Auch unterschiedliche Zoomstufen können die Darstellung beeinflussen. Es empfiehlt sich daher, die Navigation so zu gestalten, dass sie sich an unterschiedliche Textgrößen, Zoomstufen, Bildschirmgrößen und Auflösungen anpassen kann. Auch lange Wörter und unterschiedliche Sprachen sollten berücksichtigt werden. Die entscheidende Frage bei der Umsetzung ist:
Ab welchem Punkt funktioniert die aktuelle Darstellung nicht mehr zuverlässig?
Ein Breakpoint könnte beispielsweise dort liegen, wo Navigationspunkte umbrechen, sich überlagern oder nicht mehr ausreichend Platz besitzen, wie es auch auf dieser Website hier umgesetzt ist. Die konkrete Grenze ergibt sich dementsprechend aus Inhalt und Layout, nicht an vorgeschriebenen Richtlinien. Die bekannte Konvention von einem Breakpoint unter 768px sollte daher mit Vorsicht genutzt werden.
Sichtbar oder versteckt?
Eine weit verbreitete Lösung für die Darstellung der Navigation auf schmalen Bildschirmen ist das Ausblenden der Hauptnavigation. Diese wird dann mit einem Menü-Button geöffnet, wofür sich das sogenannte “Hamburger”-Icon als Konvention etabliert hat. Ein entscheidender Nachteil ist dabei: Was nicht sichtbar ist, kann auch leichter übersehen werden. Die Navigation sollte also nur versteckt werden, wenn es die Platzverhältnisse wirklich erfordern. Bei wenigen Menüpunkten ist daher auch eine sichtbare Darstellung der Navigation auf schmalen Bildschirmen sinnvoll. Eine weitere Möglichkeit ist die “Combo Navigation”, also die wichtigen Ziele sichtbar zu lassen und zusätzliche Optionen in einem versteckten Menü zusammenzufassen.
Der Menü-Button
Wenn die Navigation auf kleinen Viewports versteckt wird, benötigt sie einen erkennbaren Auslöser. Semantisch handelt es sich dabei um einen Button, denn er führt nicht zu einer anderen Seite, sondern verändert den Zustand der Oberfläche. Die Grundlagen dafür behandeln wir in den Kapiteln “Semantik & Aufbau” sowie “Zustände & Interaktion”.
<button
type="button"
aria-expanded="false"
aria-controls="main-navigation"
>
Menü
</button>
<nav id="main-navigation" aria-label="Hauptnavigation">
...
</nav>aria-expanded wird beim Öffnen des Menüs entsprechend aktualisiert. Die sichtbare Gestaltung kann sich an diesem Zustand orientieren.
Auch die Benennung des Buttons ist relevant, denn ein Hamburger-Icon ist inzwischen zwar ein bekanntes Muster, doch kann eine Bezeichnung wie “Menü” zusätzliche Informationen liefern.
Anordnung komplexer Navigation
Besonders Mega-Menüs benötigen große Aufmerksamkeit bei der Umsetzung auf kleineren Viewports. Das mehrspaltige Layout kann auf großen Bildschirmen gut funktionieren, lässt sich aber nicht sinnvoll auf die Breite eines Smartphones zusammenschieben. Diese Inhalte können stattdessen neu angeordnet werden: Nebeneinanderliegende Gruppen können zum Beispiel untereinander angeordnet oder zusätzliche Ebenen bei Bedarf ein- und ausgeklappt werden. Bei der Umsetzung von Navi haben wir uns für die letztere Variante entschieden.
Hover-basierte Interaktionen lassen sich nicht identisch auf Touchscreens übertragen, weshalb unterschiedliche Eingabemethoden bereits bei der Konzeption bedacht werden sollten. Als Interaktionsformen gelten Maus, Tastatur, Touch und Sprache, die im besten Fall vollständig berücksichtigt werden.
Zusammenfassung
Responsive Navigation passt ihre Darstellung und Bedienung an unterschiedliche Nutzungssituationen an, ohne dabei ihre Informationsarchitektur zu ändern. Bezeichnungen, Reihenfolge und Ziele sollten möglichst konsistent bleiben. Layout und Interaktionen können sich an den verfügbaren Platz anpassen. Breakpoints sollten nicht nur anhand bestimmter Geräte gewählt werden, sondern dort entstehen, wo eine Darstellung nicht mehr zuverlässig funktioniert. Das Ausblenden der Navigation hinter einem Menü-Button kann auf kleinen Viewports sinnvoll sein, reduziert jedoch ihre Sichtbarkeit und sollte daher nicht pauschal eingesetzt werden.
Quellen
- Menu Structure. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
- Module 3: Navigation Design. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
- Kaplan, Kate (13.06.2025). The Hamburger-Menu Icon Today: Is it Recognizable?. Nielsen Norman Group. Abgerufen am 14.09.2026.