Navigation Design Patterns: 9 Menü-Layouts für Web und Mobile

Navigation ist kein Menü. Sie ist ein Versprechen darüber, wo Dinge zu finden sind. Wenn sie funktioniert, bewegen sich Nutzer durch ein Produkt, ohne nachzudenken. Wenn sie scheitert, gehen sie.

Nutzer lesen keine Navigation. Sie scannen sie, vertrauen ihr und bemerken sie nur, wenn sie versagt.

Das ist das eigentliche Design-Problem. Navigation ist kein Feature zum Feiern, sie ist Infrastruktur, die unsichtbar werden soll. Das falsche Pattern für die eigene Informationsarchitektur oder den Kontext der Nutzer zu wählen, löst eine Kettenreaktion aus: Menschen finden keine Bereiche, können sich nicht orientieren und bauen nie ein mentales Modell davon auf, wie das Produkt funktioniert.

Neun Patterns decken fast jeden Fall ab. Was folgt, ist eine direkte Aufschlüsselung jedes einzelnen: wofür es gut ist, wo es bricht und wann man es einsetzt.

---

Wofür Navigation eigentlich da ist

Navigation beantwortet für den Nutzer eine Frage: Wo kann ich von hier aus hin? Beantworte sie klar, und sie bewegen sich. Mach sie suchen, und sie gehen.

Die strukturelle Aufgabe von Navigation ist es, die Informationsarchitektur als System darzustellen, dem Nutzer vertrauen können. Das bedeutet Konsistenz, Stabilität und eine ehrliche Abbildung dessen, was tatsächlich im Produkt steckt. Navigation, die zwischen Seiten wechselt, andere Labels als die URLs zeigt oder primäre Pfade unter sekundären vergräbt, ist ein Design-Versagen, unabhängig davon, wie poliert die Dropdown-Animation ist. Amazon behält aus genau diesem Grund auf jeder Seite über Hunderte von Millionen Produkten hinweg dieselbe primäre Navigation bei.

Die praktische Konsequenz: Man wählt ein Navigation Pattern auf Basis von zwei Eingaben: wie tief und breit die IA ist und in welchem Kontext Menschen das Produkt nutzen. Alles andere, visueller Stil, Animation, Farbe, folgt aus diesen beiden Entscheidungen.

---

Die Top Navigation Bar

Die horizontale Top Bar ist aus gutem Grund das Standard-Pattern des Webs. In Desktop-Größe passt sie etwa fünf bis sieben primäre Bereiche in den Header, hält sie jederzeit sichtbar und spiegelt wider, wie Menschen lesen: von links nach rechts, von oben nach unten.

Neon (neon.tech) setzt das sauber um. Wortmarke links, primäre Nav-Links zentriert, Sign-in und ein CTA-Button rechts. Nichts versteckt, nichts verschachtelt, kein kognitiver Overhead. Im besten Fall erzählt eine Top Bar die gesamte Geschichte der Site-Struktur in einer einzigen Zeile, ohne dass eine Interaktion erforderlich ist.

Der Fehlermodus ist das Vollstopfen. Eine Top Bar mit neun Links, zwei Dropdowns, einem Utility-Menü und einem Such-Icon ist kein Navigation Pattern, das ist ein Panikanfall. Das Pattern hat eine harte Obergrenze von etwa sechs bis sieben Items, bevor es umstrukturiert werden muss.

Top Bars erfordern auch eine geplante Mobile-Variante. Auf kleinen Screens hat das horizontale Layout keinen Platz. Wer nicht beim Design festlegt, wie die Small-Viewport-Erfahrung aussieht, wird am Ende ein Hamburger-Menü als Nachgedanken anbauen, was neue Probleme schafft.

---

Das Hamburger-Menü

Das Hamburger-Menü (drei gestapelte Linien, öffnet bei Tippen eine Schublade oder ein Overlay) versteckt Navigation hinter einer zusätzlichen Interaktion. Es spart Bildschirmfläche. Es macht aber auch jeden Bereich des Produkts schwerer auffindbar.

Die Forschung dazu ist eindeutig. NNGroup fand heraus, dass Tab-Navigation auf Mobile Hamburger-Menüs bei Auffindbarkeit und Aufgabenabschlussraten konstant übertrifft. Wenn Navigation versteckt wird, nutzen Menschen sie weniger. Items hinter dem Hamburger werden als weniger wichtig wahrgenommen, weil sie es visuell sind.

Das macht das Hamburger-Menü nicht falsch. Es macht es zu einem Kompromiss. Für Sites mit tiefen, selten aufgerufenen Bereichen ist der Kompromiss akzeptabel. Für Apps, die täglich geöffnet werden, ist es meist ein Fehler.

Instagram versuchte, primäre Navigation hinter einem Hamburger zu verstecken, und ruderte zurück, indem es die Kernbereiche in eine Bottom Tab Bar verlegte. Die Lektion ist klar: Das Hamburger-Menü für sekundäre Pfade, Einstellungen und selten aufgerufene Ziele nutzen. Niemals für die Aktionen, die definieren, warum jemand das Produkt geöffnet hat.

---

Die persistente Sidebar

Eine persistente Sidebar heftet eine vollständige Navigationsspalte links auf dem Bildschirm fest und bleibt sichtbar, während der Nutzer durch Inhalte scrollt. Sie ist das dominante Pattern für Dashboards, Design-Tools und tiefe Dokumentationen, weil die räumliche Beständigkeit das Feature ist.

Tailwind CSS Docs macht es genau richtig. Die linke Sidebar enthält jeden Abschnitt der Dokumentation, gruppiert und scrollbar, während der Inhalt die verbleibende Breite einnimmt. Nutzer wissen immer, wo sie sind, wohin sie können und wie der gesamte Informationsraum strukturiert ist. Diese räumliche Orientierung ist der eigentliche Zweck in tiefem Referenzmaterial, in dem Menschen ständig zwischen Abschnitten wechseln.

Slack, Notion und Figma verwenden aus demselben Grund persistente Sidebars auf App-Ebene. Die Sidebar ist die Karte. Sie zu entfernen würde bedeuten, dass Nutzer das mentale Modell bei jeder Navigationsaktion neu aufbauen müssen, ein Aufwand, den sie nicht leisten sollten.

Der Preis ist horizontale Bildschirmfläche. Auf einem 13-Zoll-Laptop belegt eine persistente Sidebar 250 bis 300 Pixel des Content-Bereichs. Auf Mobile gibt es keinen Platz dafür.

Responsive Sidebars kollabieren auf kleinen Screens zu einer Schublade oder einem Hamburger-Menü und bringen damit dieselben Auffindbarkeits-Probleme zurück, die man zu vermeiden versucht. Sie von Anfang an mit den Tokens zu verknüpfen, die eine Nav konsistent halten, oder man flickt später.

---

Die Bottom Tab Bar

Die Bottom Tab Bar verankert drei bis fünf Icons am unteren Bildschirmrand, direkt in der Daumenzone. Sie ist der Standard für native Mobile-Apps und, Stand 2026, das Standard-Pattern für jedes Web-Produkt, das täglich auf dem Smartphone geöffnet wird.

Instagram, Spotify und YouTube nutzen dieses Pattern alle für ihre primäre Mobile-Navigation. Das sind keine Zufälle. Die Bottom Bar existiert, weil der obere Bereich eines Smartphone-Bildschirms mit einem Daumen am schwersten zu erreichen ist, und Navigation wird ständig getippt. Primäre Ziele nach unten zu verlagern reduziert den körperlichen Aufwand auf eine Weise, die sich über Tausende von täglichen Sessions summiert.

Fünf Items ist die harte Obergrenze. Über fünf hinaus schrumpfen Icons und Labels werden abgeschnitten. Wenn ein Produkt mehr als fünf primäre Bereiche hat, ist das ein Informationsarchitektur-Problem, das als Navigation-Problem verkleidet ist. Zuerst umstrukturieren, dann das Pattern wählen.

Im Jahr 2026 ist die Bottom Tab Bar das Standard-Pattern für jedes Produkt, das auf Mobile mindestens täglich geöffnet wird. Wer ein Consumer-Mobile-Produkt oder eine Mobile-First Progressive Web App designt und keine Bottom Bar verwendet, braucht einen konkreten Grund dafür. "Wir haben zuerst für Desktop designed" ist keiner.

---

Das Mega-Menü

Ein Mega-Menü expandiert einen einzelnen Top-Navigation-Eintrag zu einem breiten, mehrspaltigen Panel aus Links, Kategorien und manchmal Vorschau-Kacheln. Es ist für Sites mit großen Katalogen und komplexen Hierarchien gebaut, die ohne es in einem einfachen Dropdown unbrauchbar wären.

Amazon fährt eine extreme Version davon unter seinem "All"-Menü. Dutzende von Kategorien mit Unterkategorien, in Spalten und Gruppen organisiert, alles in einem Panel sichtbar. Das Pattern funktioniert unter Katalog-Druck, weil es Tiefe ohne mehrere Klicks durch eine Hierarchie erschließt. Alles ist in einer Ansicht scanbar.

Das Problem ist, dass Mega-Menüs per Design ein Desktop-only-Pattern sind. Ein mehrspaltiges Dropdown-Panel überträgt sich nicht auf Mobile. Sites, die sie verwenden, brauchen eine komplett separate Navigation-Strategie für kleine Screens, was den Design- und Wartungsaufwand verdoppelt.

Mega-Menüs scheitern auch auf flachen Sites. Zwölf Seiten rechtfertigen kein Mega-Menü. Das Pattern impliziert eine Komplexität, die durch tatsächliche Inhaltstiefe verdient sein muss, nicht durch Optimismus über künftiges Wachstum.

---

Breadcrumbs

Breadcrumbs zeigen den Pfad von der Homepage zur aktuellen Seite: Home > CSS > Grid. Sie sind keine primäre Navigation. Sie sind Orientierungs-Navigation und erfüllen eine präzise Funktion.

MDN verwendet Breadcrumbs auf jeder Referenzseite. Wer über eine Google-Suche auf der CSS-Grid-Dokumentation landet, erkennt am Breadcrumb-Pfad sofort, dass diese Seite in CSS liegt, das in References liegt. Dieser Kontext komprimiert eine dreistufige Hierarchie in eine einzelne Zeile, die keine Interaktion zur Interpretation erfordert.

Breadcrumbs sind nutzlos auf flachen Sites. Wenn das gesamte Produkt zwei Ebenen tief ist, fügen Breadcrumbs visuelles Rauschen hinzu, ohne Orientierungswert zu liefern. Sie verdienen ihren Platz auf Dokumentations-Sites, E-Commerce-Hierarchien wie Home > Herren > Jacken > Wasserdicht und jeder Site, auf der Nutzer regelmäßig tief über Suche landen.

Sie ergänzen andere Patterns, ersetzen sie aber nicht. Breadcrumbs sitzen über dem Inhalt und ergänzen eine Top Bar oder Sidebar. Für weitere Web- und UI-Design-Aufschlüsselungen gilt dieselbe Logik: sekundäre Navigation-Elemente sollten das primäre Pattern unterstützen, nicht mit ihm konkurrieren.

---

Die Command Palette

Die Command Palette ist ein tastaturausgelöstes Overlay, typischerweise mit Cmd+K oder Ctrl+K aufgerufen, das Texteingaben annimmt und priorisierte Aktionen, Navigation-Ziele und Suchergebnisse zurückgibt. Linear, Raycast, Slack und Figma liefern sie alle als erstklassige Navigation-Oberfläche.

Im Jahr 2026 hat die Command Palette den Sprung von einem Power-User-Trick zu einem primären Navigation-Mechanismus in ernsthafter Produktivitätssoftware gemacht. Linears Cmd+K bringt einen in unter zwei Sekunden zu jedem Issue, Projekt oder Workspace-Vorgang. Raycast ist fast vollständig um dieses Pattern herum gebaut. Diese Produkte behandeln getippte Absicht als direkteren Weg als jede Menühierarchie, weil es für Menschen mit Tastaturgewohnheiten einer ist.

Der Fehlermodus ist Unsichtbarkeit. Nutzer, die den Shortcut nicht kennen, werden ihn nie durch Erkundung entdecken. Command Palettes können sichtbare Navigation für Erstnutzer oder alle, die keine tastaturorientierten Gewohnheiten haben, nicht ersetzen. Produkte, die alle Navigation hinter Cmd+K verstecken, lassen jeden neuen Nutzer im Stich.

Der richtige Einsatz ist Ergänzung, kein Ersatz. Eine Command Palette neben der Sidebar oder Top Bar betreiben. Tastatur-native Nutzer können das Menü komplett überspringen.

Alle anderen navigieren visuell. Beide Pfade müssen existieren.

---

Sticky und schrumpfende Header

Ein Sticky Header bleibt beim Scrollen des Nutzers am oberen Rand des Viewports fixiert. Ein schrumpfender Header tut dasselbe, reduziert aber seine Höhe, nachdem der Nutzer eine Scroll-Schwelle passiert, und gewinnt so vertikalen Platz zurück, ohne den Zugang zur Navigation zu opfern.

Beide Patterns halten Navigation auf langen Seiten zugänglich, ohne dass ein Scroll zurück nach oben erforderlich ist. Auf inhaltsreichen Seiten ist das eine echte Verbesserung der Usability. GitHub verwendet einen Sticky Header auf Repository-Seiten, sodass primäre Navigation, Suche und Repo-Kontext beim Scrollen durch Issues, Code und Diskussionen immer sichtbar sind.

Der Preis ist vertikale Bildschirmfläche. Ein Sticky Header von 60 bis 70 Pixeln beansprucht diese Höhe an jeder Scroll-Position. Auf einem 768 Pixel hohen Tablet sind das fast 10 Prozent des Viewports, die dauerhaft von Navigation belegt werden. Schrumpfende Header gewinnen etwas davon zurück, indem sie nach dem Scrollen auf etwa 40 Pixel reduzieren, erfordern aber eine sorgfältige Implementierung, damit sie absichtlich und nicht kaputt wirken.

Sticky Header auf kurzen Seiten vermeiden, bei denen der Nutzer schnell den unteren Rand erreicht. Das Pattern verdient seinen Platz auf langen, inhaltsreichen Seiten, bei denen ein Zurückscrollen nach oben erheblichen Aufwand bedeuten würde.

---

Der Fat Footer

Der Fat Footer ist ein breiter, mehrspaltiger Footer mit sekundärer Navigation, Link-Kategorien, rechtlichen Seiten und Kontaktinformationen. Er ist keine primäre Navigation. Er ist eine zweite Chance für Nutzer, die durch den Hauptinhalt scrollen, ohne gefunden zu haben, was sie suchten.

Tailwind CSS, Stripe und die meisten SaaS-Marketing-Sites betreiben Fat Footer mit vier bis sechs Spalten, die Produkt-Links, Dokumentation, Unternehmensseiten, rechtliche Hinweise und Social-Links abdecken. Sie kosten nichts an Viewport-Höhe während der Hauptinhalt-Erfahrung und bieten eine nützliche Karte für Nutzer, die den unteren Rand auf der Suche nach etwas Bestimmtem erreichen.

Fat Footer sind für SEO wichtiger als für Live-Navigation. Jeder Link in einem Fat Footer ist ein crawlbarer Pfad. Sie sind einer der Hauptwege, über die Suchmaschinen sekundäre und tertiäre Seiten einer Site entdecken. Aus reiner Usability-Perspektive scrollen die meisten Nutzer nie zum Footer, aber diejenigen, die es tun, suchen gezielt.

Den Fat Footer in eingeloggten Produkt-Erfahrungen weglassen. Notion zeigt im Editor keinen Marketing-Footer. Das Pattern gehört zu Marketing-Sites und Dokumentations-Hubs, auf denen anonyme und neue Nutzer frei stöbern.

---

Wie man das richtige Pattern wählt

Das richtige Navigation-Pattern ergibt sich aus zwei Eingaben: der Tiefe der Informationsarchitektur und dem Kontext, in dem Menschen das Produkt nutzen. Alles andere ist eine Folge dieser beiden Faktoren.

Patterns zu kombinieren ist normal und erwartet. Die meisten ernsthaften Produkte nutzen zwei oder drei. Tailwind CSS Dokumentation nutzt eine Top Bar für Site-Level-Navigation, eine persistente Sidebar für Docs-Navigation und Breadcrumbs für seitenebene Orientierung. Diese drei Patterns adressieren drei verschiedene Ebenen der Navigation-Hierarchie gleichzeitig, ohne sich zu überlappen.

Brainy hilft Designern, schneller schärfere Entscheidungen bei der Arbeit zu treffen, die tatsächlich ausgeliefert wird. Sieh, was wir für Creator bauen.

---

Navigation-Fehler, die die Usability still ruinieren

Primäre Aktionen in einem Hamburger-Menü verstecken. Wenn Nutzer ein Feature täglich brauchen, kann es nicht hinter einem zusätzlichen Tap leben. Die Click-Through-Rate auf den Hamburger selbst messen. Wenn sie unter 30 Prozent liegt, sind die darin enthaltenen Pfade für die meisten Nutzer unsichtbar.

Inkonsistente Bezeichnungen über Oberflächen hinweg. "Insights" im Dashboard, "Reports" in der Onboarding-E-Mail, "Analytics" in der Hilfedokumentation, alle zeigen auf dasselbe Ziel. Navigation ist ein Vokabular. Jedes Synonym ist ein Fragezeichen im mentalen Modell eines Nutzers.

Kein aktiver Zustand für die aktuelle Position. Nutzer müssen wissen, wo sie sind. Ein aktiver Zustand beim aktuellen Nav-Item ist das grundlegendste verfügbare Orientierungssignal. Es wegzulassen zwingt Nutzer, die URL zu lesen, was ein Fehlermodus ist, den man ins Produkt eingebaut hat.

Navigation, die sich je nach Seite oder Bereich verschiebt. Wenn die Sidebar sich je nachdem umordnet, in welchem Bereich der Nutzer ist, hat man das räumliche Gedächtnis zerstört, das er aufgebaut hat. Navigation sollte eine feste Karte sein. Produkte, bei denen sich die Karte je nach Position ändert, bauen kein Nutzervertrauen auf, sie zerstören es.

Verschachtelung übertreiben. Ein dreistufiges Dropdown ist fast immer ein Informationsarchitektur-Problem, das falsch in der UI dargestellt wird. Zuerst die Struktur flach machen. Verschachtelte Menüs sind langsam zu scannen, auf Touch nicht nutzbar und erfordern präzise Maussteuerung, um beim Hover offen zu bleiben.

Für Layout-Patterns, die zum Scannen gebaut sind, gilt dasselbe Prinzip: Struktur und Orientierung kommen vor Dekoration. Navigation, die nicht orientiert, ist bestenfalls Dekoration, schlimmstenfalls Reibung.

---

FAQ

Was ist das am häufigsten verwendete Navigation-Pattern im Web?

Die horizontale Top Navigation Bar ist das häufigste Pattern für Desktop-Sites. Für Mobile-Apps und täglich genutzte Produkte ist die Bottom Tab Bar zum Standard geworden. Die meisten realen Produkte nutzen beides, eine Top Bar auf Desktop und eine Bottom Bar auf Mobile, über eine konsistente Informationsarchitektur.

Wann sollte ich ein Hamburger-Menü verwenden?

Ein Hamburger-Menü für sekundäre oder selten genutzte Navigation auf Mobile verwenden, nicht für primäre Bereiche. Wenn ein Nutzer den Hamburger öffnen muss, um das Kernding zu tun, wofür er das Produkt nutzt, braucht die Architektur eine Umstrukturierung, nicht ein besseres Icon.

Wie viele Items sollte eine Navigation Bar haben?

Fünf bis sieben Items ist die akzeptierte Obergrenze für eine horizontale Top Bar, und fünf für eine Bottom Tab Bar auf Mobile. Über diese Zahlen hinaus beginnt das Pattern zu versagen: Items drängen zusammen, Labels werden abgeschnitten, und das Scannen kostet mehr, als es bringt.

Kann ich mehrere Navigation-Patterns auf einer Site verwenden?

Nicht nur kann man das, man sollte es. Die meisten realen Produkte nutzen zwei oder drei Patterns, die verschiedene Ebenen der Navigation-Hierarchie adressieren. Dokumentations-Sites kombinieren häufig eine Top Bar für Site-Navigation, eine persistente Sidebar für Abschnitts-Navigation und Breadcrumbs für die Seitenposition.

Jedes Pattern behandelt eine eigene Schicht ohne Überschneidung. Der Fehler ist, mehrere Patterns zu nutzen, die konkurrieren statt zu kooperieren.

Wie beeinflusst Navigation SEO?

Links in der Top Bar, Sidebar und im Fat Footer geben Page Authority weiter und helfen Suchmaschinen, Seiten zu entdecken und zu indexieren. Breadcrumbs fügen strukturierte Daten hinzu, die Pfadinformationen direkt in Suchergebnissen anzeigen können. Navigation ist Teil der SEO-Architektur und sollte von Beginn an so behandelt werden, nicht nachträglich aufgesetzt.

---

Hör auf, Menschen suchen zu lassen

Navigation ist unsichtbar, wenn sie funktioniert, und frustrierend, wenn nicht. Das Ziel ist niemals ein schönes Menü. Das Ziel sind Nutzer, die ankommen, sich orientieren, sich bewegen und zurückkehren, ohne einen einzigen Moment der Reibung.

Neun Patterns decken fast alles ab: die Top Bar für Marketing-Sites und breite Referenzen, die persistente Sidebar für tiefe Tools und Dokumentation, die Bottom Tab Bar für täglich genutzte Mobile-Produkte, das Mega-Menü für Katalogtiefe, Breadcrumbs für hierarchische Orientierung, die Command Palette für geschwindigkeitsorientierte Produktivitätstools, Sticky Header für Langform-Inhalte, der Hamburger als Fallback für sekundäre Pfade und der Fat Footer als zweite-Chance-Karte für Marketing-Sites.

Basierend auf IA-Tiefe und Nutzungskontext wählen. Zwei oder drei Patterns überlagern, wenn das Produkt mehrere Ebenen der Navigation-Hierarchie hat. Die Fehler vermeiden, die sich still summieren: versteckte primäre Aktionen, inkonsistente Labels, fehlende aktive Zustände, wechselnde Nav-Strukturen und übermäßige Verschachtelung.

Weitere Web- und UI-Design-Aufschlüsselungen auf Brainy Papers erkunden oder mit der Brainy Creator Community mitbauen und das Handwerk neben 2M+ Designern schärfen, denen es darauf ankommt, die Grundlagen richtig zu machen.