Was gute Navigation wirklich zu tun hat
Bevor wir uns die 10 Website-Navigation-Beispiele ansehen, drei einfache Aufgaben, die Ihre Navigation erledigen muss:
- Sagen Sie Besuchern, wo sie sich befinden. Ein klarer aktueller Seiten-Indikator ist das am häufigsten übersehene Grundprinzip der modernen Webgestaltung.
- Sagen Sie ihnen, was noch existiert. Ein Besucher auf Seite X sollte sich die restliche Website ohne Klicken vorstellen können.
- Bringen Sie sie in einem oder zwei Klicks zur nächsten Seite. Mehr ist Reibung; weniger bedeutet wahrscheinlich, dass Sie etwas verstecken, was sie benötigen.
Die meisten der unten stehenden Website-Navigation-Beispiele erfüllen alle drei Kriterien. Diejenigen, die es nicht tun (Wikipedia, bewusst), sind interessant gerade wegen der Stellen, an denen sie die Regeln brechen.
10 Website-Navigation-Beispiele in verschiedenen Schwierigkeitsstufen
Die 10 Website-Navigation-Beispiele unten sind nach dem Typ des Problems geordnet, das sie lösen, nicht nach dem visuellen Stil. Sie decken zusammen die meisten Muster ab, die Sie antreffen werden – globale Menüs, Mega-Menüs, Seitenleisten, Breadcrumb-Navigation, mobile untere Leisten, Navigation im Text und mehr. Wenn Sie Navigation-Menü-Beispiele auf Skalen jenseits eines typischen E-Commerce-Websites suchen, ist dies die Referenzmenge.
1. GOV.UK – Wenn Sie 67 Millionen Menschen gleichzeitig bedienen müssen
Typ: Regierungsdienstportal
Warum es sich lohnt, es zu studieren: Möglicherweise das am meisten getestete Information Architecture der Welt.
GOV.UK ist die digitale Vordertür der britischen Regierung. Es dient Bürgern, Unternehmen und Besuchern über 25 Abteilungen und tausende Dienste – von "Meinen Pass erneuern" bis "Tod anmelden" bis "Ein neues Unternehmen gründen." Die Navigation muss all das auffindbar machen, ohne einen gestressten Besucher in Eile zu überwältigen.
Die Lösung ist radikale Klarheit. Die Startseite hat kein Mega-Menü, kein Bildmaterial, kein Hero-Bild. Sie hat ein Suchfeld, eine Liste der "Beliebten auf GOV.UK" Aufgaben und eine kategoriale Browse-Liste ("Vorteile", "Geburten, Todesfälle, Heiraten und Pflege", "Kinderbetreuung und Elternschaft", usw.). Das ist alles.
Was darunter liegt, ist genauso lehrreich. GOV.UK hat "Schritt-für-Schritt-Navigation" erfunden – für End-to-End-Reisen wie *Fahrstunden lernen*, zeigt die Site nummerierte Schritte in einer Seitenleiste an, wobei jeder Schritt auf den relevanten Inhalt verweist. Sie wissen immer, wo Sie im Prozess sind und was als nächstes kommt.
Drei Dinge, die Sie kopieren können:
- Verwenden Sie klare Sprach-Kategorielabels, nicht interne Organigramm-Labels. "Vorteile" ist besser als "DWP-Dienste." "Geld und Steuern" ist besser als "HM Revenue & Customs Operations." Schreiben Sie Ihre Navigationslabels für Besucher, nicht für Abteilungen.
- Ein Suchfeld ist Navigation für contentreiche Websites. Wenn Sie tausende Seiten haben, ist die Suche schneller als das Durchblättern. Machen Sie es prominent, schnell und fehler tolerant.
- Schritt-für-Schritt-Navigation für mehrseitige Aufgaben. Wenn die Aufgabe Ihres Besuchers 5+ Seiten dauert, geben Sie ihnen eine nummerierte Seitenleiste, die zeigt, wo sie sich befinden. Es ist eine kleine Ergänzung mit unverhältnismäßigem Einfluss auf die Abschlussraten.
2. MoMA – Das "Zwei Zielgruppen, eine Website"-Problem
Typ: Museum / kulturelle Institution
Warum es sich lohnt, es zu studieren: Lösung des dualen Zielgruppen-Navigation-Problems sauber.
Die MoMA-Website dient zwei völlig unterschiedlichen Zielgruppen mit unterschiedlichen Aufgaben. Casual-Besucher wollen Ausstellungen sehen, einen Museumsbesuch planen, Tickets kaufen. Forscher und Lehrer wollen tiefen Zugang zur Sammlung, Veröffentlichungen, wissenschaftliche Materialien. Die Navigation muss beiden Gruppen einen sauberen Einstieg bieten, ohne die wissenschaftliche Seite zu vereinfachen oder die Besuchsplanung zu verstecken.
Die 2019-Neuorganisation löste es mit zwei Ebenen. Die obere horizontale primäre Navigation verwendet einfache Bezeichnungen – Visit, Exhibitions, Events, Art and Artists, Store, Magazine – die für beide Zielgruppen funktionieren. Jeder Bezeichner öffnet ein verschachteltes Dropdown, das in "primäre" und "sekundäre" Aufgaben geteilt wird. Art and Artists führt zu beiden öffentlich zugänglichen Sammlungsbrowser und tiefen Forschungstools.
Die berühmte "Rauschenberg-Test"-Regel – intern verlangt das Team, dass der längste Künstlername in der Sammlung (Rauschenberg) in jeden Navigationscontainer passt, egal auf welcher Bildschirmgröße – ist eine Disziplin, die die meisten Sites kopieren könnten.
- Trennen Sie das Dropdown in "primäre" und "tiefe" Aufgaben. Casuelle Besucher erhalten die sichtbaren Optionen; fortgeschrittene Benutzer erhalten die Links am unteren Ende des Dropdowns. Dasselbe Menü, zwei Ebenen.
- Setzen Sie einen "längsten Label"-Test für Navigationscontainer. Was auch immer Ihr Äquivalent von "Rauschenberg" ist – Ihr längster Produktname, Ihr längster Diensttitel, Ihre längste Artikelkategorie – stellen Sie sicher, dass er an jedem Breakpoint passt. Abgeschnittene Navigationslabels signalisieren sofort Nachlässigkeit.
- Fettgeschriebene Schrift über Icons für primäre Navigation. Die Navigation von MoMA verwendet keine Icons auf der obersten Ebene. Die Labels übernehmen die gesamte Arbeit. Icons fügen nur Unordnung hinzu, es sei denn, sie sind wirklich global verständlich (Suche, Warenkorb, Konto).
3. IKEA – Das Mega-Menü, das tatsächlich funktioniert
Typ: Großes Katalog-E-Commerce (12.000+ Produkte)
Warum es sich lohnt, es zu studieren: Ein Mega-Menü, das richtig gemacht ist, wenn die meisten schlecht gemacht werden.
Mega-Menüs haben 2026 einen schlechten Ruf – zu viele Webseiten verwenden sie als Ablageort für jeden Link, den das Team nicht entscheiden konnte, wo er hingehört. IKEA zeigt, wie sie aussehen, wenn sie richtig verwendet werden. Das Top-Navigation-Menü hat nur fünf Elemente: Produkte, Räume, Angebote, Mehr, Stores durchsuchen. Wenn man "Produkte" anzeigt, öffnet sich ein kategorisiertes Panel, das jede Möbelkategorie mit kleinen Produktfotos als visuelle Anker zeigt.
Die Disziplin liegt darin, was nicht vorhanden ist. Es gibt kein "Über uns." Kein "Nachhaltigkeit." Kein "Nachrichtenraum." Kein "Karriere." Diese existieren auf der Website – aber auf Fußzeile-Ebene, nicht im Wettbewerb mit dem Kauffluss.
Drei Dinge, die man kopieren kann:
- Reservieren Sie die Top-Navigation nur für Einnahme-Pfade. Nichts in der Top-Navigation sollte mit dem Konversionskanal konkurrieren. Inhalte wie "Über uns", "Karriere", "Presse" gehören alle in die Fußzeile-Navigation.
- Verwenden Sie Produktfotos als visuelle Anker in Mega-Menüs. Ein kleines Bild neben jeder Kategorie in einem Mega-Menü hilft Besuchern, schneller zu erkennen, was sie suchen, als bei Menüs mit nur Text. Besonders wirksam für visuelle Produkte.
- Unterschiedliche Räume sind eine kluge sekundäre Informationarchitektur. "Wohnzimmer / Schlafzimmer / Küche" ist die Art, wie Kunden Möbel denken. "Sofas / Stühle / Tische" ist, wie der Katalog organisiert ist. IKEA präsentiert beides – es ermöglicht Kunden, nach ihrem mentalen Modell zu shoppen, nicht nach dem SKU-Baum des Unternehmens. Dies ist eines der saubersten Beispiele für Website-Navigation im Einzelhandel.
4. BBC Sport – Navigation, die sich an Live-Events anpasst
Typ: Live-Nachrichten und Content-Medien
Warum es sich lohnt, es zu studieren: Mobile Bottom-Navigation mit messbaren Ergebnissen.
Das App-Team von BBC Sport veröffentlichte einen öffentlichen Fallbericht über den Wechsel zu einer unteren Navigation auf mobilen Geräten. Das Ergebnis: 7,4 % mehr konsumierter Inhalt mit dem neuen Muster, validiert durch einen 4-wöchigen Multi-Varianten-Test. Dies ist eines der wenigen Beispiele für mobile Navigation mit echten, veröffentlichten Daten hinter dem Erfolg.
Die Desktop-Website verwendet eine horizontale Navigation, die sich während großer Ereignisse anpasst – während der Olympischen Spiele, des Weltpokals, der Commonwealth Games, wird ein temporärer Link "Olympics 2024" oder "Euros 2026" als oberstes Element eingefügt und verschwindet, sobald das Ereignis vorbei ist. Dynamische Navigation, die an echte Ereignisse gebunden ist, ist selten; die meisten Webseiten ändern ihre Navigation nie über Jahre.
Drei Dinge, die man kopieren kann:
- Unter-Navigation auf mobilen Geräten ist besser als Top-Navigation für Content-Apps. Moderne Smartphones sind zu groß, um Taps an der Oberkante bequem zu sein. Der Daumen liegt natürlicherweise unten.
- Testen Sie Navigation-Änderungen anhand von Content-Konsum-Metriken, nicht anhand von Navigation-Klicks. Die richtige Erfolgsmessung für Navigation-Änderungen ist "haben die Leute mehr gelesen/gesehen/kauf?" – nicht "haben die Leute mehr auf die Navigation geklickt?"
- Erstellen Sie Platz für zeitbegrenzte Navigationselemente. Wenn Ihr Unternehmen saisonale Momente hat (Ereignisse, Verkäufe, Kampagnen), bauen Sie in Ihre Navigationstruktur die Fähigkeit ein, ein temporäres Element zu präsentieren, ohne alles andere umzubauen.
5. Wikipedia – Wenn Seitenleisten-Navigation immer noch die richtige Antwort ist
Typ: Enzyklopädie / Referenzseite (60+ Millionen Artikel)
Warum es sich lohnt, es zu studieren: Gegen alle modernen Konventionen und dennoch perfekt.
Wikipedia ist eine der meistbesuchten Webseiten der Welt. Ihre Navigation: eine Seitenleiste mit Links auf jedem Artikel (*Inhalt, Top, Siehe auch, Quellen, Externe Links*), ein globales Navigationsmenü an der linken Kante (*Startseite, Zufallsartikel, Über Wikipedia, Kontakt*), und ein Inhaltsverzeichnis innerhalb des Artikels. Es gibt kein horizontales Top-Menü. Es gibt kein Mega-Menü. Es gibt kein Hamburger-Menü, das die Arbeit für sie erledigt, auf Desktop.
Das ist Ketzerei nach den Designkonventionen von 2026 – und dennoch navigieren Hunderte von Millionen Nutzer*innen Wikipedia bequem jeden Tag. Die Lektion: Navigation-Konventionen existieren, weil sie den meisten Webseiten helfen; sie sind keine Naturgesetze. Wenn Ihre Zielgruppe recherchierend ist und Ihr Inhalt hierarchisch ist (Artikel → Abschnitte → Quellen), sind klassische Seitenleisten-Navigation-Beispiele wie die von Wikipedia immer noch besser als trendigere Alternativen. Es ist das unkonventionellste der Website-Navigation-Beispiele in diesem Leitfaden und wahrscheinlich das lehrreichste.
Drei Dinge, die man kopieren kann:
- Ein Inhaltsverzeichnis innerhalb langer Texte ist Navigation. Lange Artikel, Dokumentation und Referenzinhalte profitieren von einem Inhaltssidebar-TOC, das sich beim Scrollen festhält. Dies ist ein Navigationselement, das die meisten Blogs vergessen.
- Erwarte nicht, dass deine Zielgruppe Navigationselemente benötigt. Wikipedia-Besucher durchsuchen nicht nach Kategorie - sie suchen oder folgen Links. Daher macht Wikipedia sich keine Sorgen um Mega-Menüs für Kategorien. Prüfe, ob deine Navigation den tatsächlichen Besuchermustern entspricht.
- Fußzeigennavigation kann die obere Navigation bei textlastigen Seiten ersetzen. Wenn der Artikelinhalt die gesamte Erfahrung darstellt, gehört die sekundäre Navigation nach unten oder in die Sidebar - nicht oben, wo sie mit dem Inhalt um Aufmerksamkeit konkurriert.
6. NYT Cooking - Filter als Navigation
Typ: Abonnementsinhalte + Werkzeug
Warum es sich lohnt, es zu studieren: Filter ist die primäre Navigation, und Labels sind die sekundäre Navigation.
Die Startseite von NYT Cooking öffnet sich nicht mit Kategorien - sie öffnet sich mit einer Suchleiste, gefolgt von einem horizontalen Scrollbereich mit ausgewählten Sammlungen (*30-Minuten-Mahlzeiten, Einfache Abendessen, Vegetarisch, Comfort Food*). Die traditionelle obere Navigation (*Rezepte, Sammlungen, Gespeicherte Rezepte, Einkauf*) ist vorhanden, ist aber nicht der primäre Entdeckungsmechanismus. Der primäre Mechanismus ist das Filtern: ein robustes Set an Facetten (Küche, Ernährung, Anlass, Zeit, Zutat), das den gesamten Katalog schrittweise verfeinert.
Dies ist ein Muster, das mehr Inhaltsseiten betrachten sollten. Wenn deine Bibliothek groß ist und das Ziel der Besucher explorativ ist ("Was soll ich kochen?"), arbeiten Filter und ausgewählte Sammlungen besser als Kategorien.
Drei Dinge, die du übernehmen kannst:
- Ausgewählte Sammlungen sind auch Navigation. Eine horizontale Scrollzeile mit "Redakteurs-Empfehlungen" oder "Trending Now" ist nützlicher als ein 6-Element-Navigation für Besucher, die kein bestimmtes Ziel haben.
- Facettierte Filter sind Navigation für jede Seite mit 200+ Elementen. Wenn du eine Rezeptsite, eine Inhaltsbibliothek, ein Kurskatalog oder eine Produktverzeichnis hast - investiere mehr in Filter-UI als in Nav-UI. Filter skaliert mit deinem Inhalt; Nav nicht.
- Speichern / Lesezeichen ist eine Navigationsfunktion, nicht eine Funktion. Eine "gespeichert für später"-Ansicht, die der Nutzer aktiv kuratiert, ist eine der wertvollsten Navigationsflächen auf einer Inhaltsseite.
7. GitHub Docs - Dokumentationsnavigation richtig gemacht
Typ: Technische Dokumentation (3.000+ Seiten)
Warum es sich lohnt, es zu studieren: Eine Referenz für jede docs-artige Informationsarchitektur.
GitHub Docs dient Entwicklern auf jeder Ebene - von ersten Git-Nutzern, die lernen, ein Repo zu klonen, bis hin zu Senior-Entwicklern, die ein Actions-Workflow debuggen. Die Navigation ist ein Dreifachlayout: Produkte und Themen auf der linken Seite, der Artikel in der Mitte und ein in-seiten-Verzeichnis auf der rechten Seite. Die linke Navigation ist nach Abschnitt ein-/ausklappbar, das rechte Verzeichnis aktualisiert sich, während du scrollst, und die Breadcrumbs über dem Artikel zeigen dir genau an, wo du bist.
Der entscheidende Punkt: Die Navigationszustände bleiben erhalten. Wenn du "GitHub Actions" → "Building and testing" einklapptest, weil du es nicht brauchst, bleibt der Abschnitt eingeklappt, wenn du in einen anderen Thema klickst. Die meisten Docs-Seiten setzen den Zustand bei jeder Navigation zurück, was Besuchern zwangsläufig dazu führt, dass sie dieselben Dinge ständig erneut einklappen müssen.
Drei Dinge, die du übernehmen kannst:
- Dreifachlayouts funktionieren für Dokumentation, einfach so. Linke Navigation für Produkt-Hierarchie, Mitte für Inhalt, rechte Seite für in-seiten-Verzeichnis. Mach das nicht für Docs-Seiten neu - kopiere es.
- Behalte die Navigationszustände über Seitenladevorgänge hinweg bei. Was auch immer der Besucher erweitert, einklappt, filtert oder sortiert - halte es so, bis er es explizit zurücksetzt. Cookies oder
localStoragesind dafür in Ordnung. - Die Breadcrumb-Navigation ist unverzichtbar für verschachtelten Inhalt. Wenn dein Besucher 4 Ebenen tief ist, braucht er den Weg zurück nach oben. Breadcrumb-Navigation ist die billigste Navigationsfunktion, die du hinzufügen kannst und zahlt sich fast immer aus.
8. MIT - Massive Multi-Audience Bildungswebsite
Typ: Universität / Multi-Audience-Einrichtung
Warum es sich lohnt, es zu studieren: Acht verschiedene Zielgruppen, eine kohärente Navigation.
Die MIT-Website dient potenziellen Studierenden, aktuellen Studierenden, Dozenten, Absolventen, Spendern, Forschern, Journalisten und der neugierigen Öffentlichkeit - acht verschiedene Zielgruppen mit acht unterschiedlichen Bedürfnissen. Die Navigation handhabt dies durch ein "für..."-Muster. Die obere Navigation ist klein (Bildung, Forschung, Innovation, Bewerbung + Finanzierung, Campus-Leben, Nachrichten, Alumni, Über uns), aber ein "Schnell-Links"-Dropdown präsentiert die häufigsten Aufgaben pro Zielgruppe ("Bewerben um MIT", "Anträge auf Stipendien stellen", "Campus besuchen", "Spende leisten").
Der Haupt-Header dreht sich durch audience-spezifische Inhalte, anstatt einen einzigen primären Nachrichteninhalt zu wählen - akzeptierend, dass es keinen einzigen wichtigsten Punkt gibt, den man gleichzeitig allen acht Zielgruppen sagen kann.
Drei Dinge, die du übernehmen kannst:
- "Schnell-Links" / "Beliebte Links"-Dropdown übertrifft es, alles in die obere Navigation zu pressen. Ein kleiner Dropdown mit "was die meisten Leute hier machen" funktioniert besser als eine 12-Element-Obere Navigation.
- Für Multi-Audience-Websites akzeptieren Sie, dass die Startseite rotiert. Versuchen Sie nicht, die eine Botschaft zu finden, die allen Ihren Zielgruppen dient. Rotieren Sie den Hero-Inhalt je nach Zielgruppe oder Besuchszeit.
- audience-spezifische Subdomains für Power-User. MIT hat
studentlife.mit.edu,news.mit.edu,alum.mit.edu– jede mit einer eigenen Navigation, die für diese Zielgruppe optimiert ist. Die Haupt-.eduist die Vordertür; die Subdomains sind die Räume.
9. Decathlon – Wenn Sportvertikale das Mega-Menü verändern
Typ: Multi-Vertical-Sport-Handel (90+ Sportarten)
Warum es sich lohnt zu studieren: Mega-Menü nach Sport, nicht nach Produkttyp organisiert.
Decathlon verkauft Produkte in über 90 Sportarten – Laufen, Radfahren, Schwimmen, Klettern, Fischen und viele mehr. Die meisten Sport-Händler organisieren ihre Navigation nach Produkttyp (Schuhe / Kleidung / Ausrüstung). Decathlon organisiert sie nach Sport. Wenn Sie "Sport" anhalten, erhalten Sie eine kategorisierte Liste: Radfahren, Laufen, Wandern, Fitness, Wassersport, Mannschaftssport, Bergsport, Kampfsport. Klicken Sie auf "Radfahren", erhalten Sie Straßenrad, Mountainbike, Stadt, Kinder – dann innerhalb jeder Kategorie das relevante Ausrüstung.
Das entspricht, wie Kunden tatsächlich denken. Jemand, der nach einem Laufschuh einkauft, denkt nicht "Ich bin im Schuh-Abteil"; er denkt "Ich bin Läufer." Die Navigation entspricht dem mentalen Modell.
Drei Dinge, die Sie kopieren können:
- Organisieren Sie nach Anwendungsfall, nicht nach SKU-Typ. Wenn Ihre Kunden sich nach Aktivität, Beruf oder Aufgaben identifizieren, organisieren Sie die Navigation um diese, nicht um Ihre Lagerkategorien.
- Localisieren Sie die Navigation, nicht nur die Sprache. Die französische Website von Decathlon führt mit Radfahren und Fußball; die US-Website mit Wandern und Laufen. Kulturelle Sportprioritäten variieren je nach Land, und die Navigation spiegelt das wider.
- Die Navigation-Bilder sollten die Kategorie signalisieren, nicht nur dekorieren. Decathlon verwendet kleine Action-Fotos (Radfahrer, Läufer, Wanderer) neben jeder Sportkategorie – der Besucher erkennt seine Aktivität sofort. Bilder als Navigationshilfe, nicht als Ornament.
10. Smashing Magazine – Inhaltsnavigation, die Leserintention respektiert
Typ: Webdesign / Dev-Veröffentlichung
Warum es sich lohnt zu studieren: Respektiert, wie Leser tatsächlich langformigen Inhalt konsumieren.
Die Navigation von Smashing Magazine ist klein (*Magazin, Artikel, Bücher, Podcasts, Workshops, Mitgliedschaft*), aber jeder Artikel hat eine eigene interne Navigation: ein sticky Inhaltsverzeichnis, ein "in diesem Artikel" Sprungmenü, eine geschätzte Lesezeit und ein sticky Autorblock mit einem Link zu "Mehr von diesem Autor." Der Artikel ist die Navigationsfläche, nicht das globale Menü.
Für langformigen Inhalt ist das die richtige Methode. Leser, die über eine Google-Suche gelandet sind, kümmern sich nicht um das globale Menü – sie kümmern sich darum, den Artikel zu durchlaufen, den sie gewollt haben, und vielleicht ähnlichen Inhalt zu finden. Smashing optimiert genau diesen Weg.
Drei Dinge, die Sie kopieren können:
- Interne Navigation schlägt globale Navigation für langformigen Inhalt. Sticky TOC, Sprunglinks, "Mehr von diesem Autor" – diese erzielen mehr Klicks als Ihr globales Menü auf langen Artikeln.
- Lesedauer-Schätzungen sind Navigation. Wissen, dass "12 Min. Lesen" vor dem Eintritt sagt dem Besucher, ob er jetzt engagieren oder später speichern soll. Beide Reaktionen sind Siege.
- "Verwandte Inhalte nach Thema" ist nützlicher als "populäre Inhalte insgesamt". Smashing zeigt verwandte Artikel nach Tag an, nicht nach globalem Rang. Der Leser, der über CSS Grid liest, möchte mehr CSS Grid-Inhalt, nicht den meistbesuchten Artikel auf der Website.
5 häufige Fehler, die still Navigation brechen
Nachdem Sie die 10 starken Website-Navigation-Beispiele oben gesehen haben, werden die Fehlertypen konsistent. Die meisten unterleistenden Sites scheitern mindestens an einem der folgenden – und die meisten dieser Fehler sind auch das, was die Website-Navigation-Beispiele trennt, die funktionieren, von denen, die es nicht tun:
- Hamburger-Menüs auf Desktop. Die Navigation hinter drei Linien auf einem 1440px-Monitor verschwendet den Raum, den Sie haben. Nutzen Sie ihn. Hamburger ist für Mobilgeräte (und nur selten sogar dort).
- Zu viele Top-Level-Elemente. Wenn Ihre Top-Navigation 9+ Elemente hat, ist Ihre Informationsarchitektur vor dem Design gebrochen. Ziele auf 5–7 Elemente. Darüber hinaus gruppieren Sie in ein "Mehr"-Dropdown.
- Unklare Bezeichnungen. "Lösungen" und "Ressourcen" sind die am häufigsten geklickten Wörter in B2B-Navigation und die am wenigsten nützlich. Schreiben Sie, was tatsächlich darin ist: "Für Marketing-Teams", "Kundenberichte", "Preisführer".
- Kein aktueller Seiten-Indikator. Ein Besucher auf
/pricingsollte "Pricing" in der Navigation hervorgehoben sehen. Das ist grundlegend und häufig übersehen. - Sticky-Navigation, die zu hoch ist. Ein 96px sticky-Header auf Mobilgeräten frisst ein Drittel des Bildschirms. Halten Sie sticky-Navigation auf max. 56–64px, oder verstecken Sie sie beim Scrollen nach unten und zeigen Sie sie beim Scrollen nach oben.
Kurzübersicht: Welcher Navigationsmuster passt zu Ihrer Website?
Kreuzverweis der 10 Website-Navigation-Beispiele oben in eine schnelle Entscheidungsmatrix:
Seitentyp | Empfohlene Navigation | Vermeiden |
Landingpage (ein Produkt) | Sticky Top-Navigation mit 3–5 Elementen + klare CTA | Mega Menüs, Hamburger-Menüs auf Desktop |
E-Commerce (unter 200 SKUs) | Top-Navigation mit Kategorie-Downloaddropdowns + Suche | Mega Menüs (zu viel) |
E-Commerce (1.000+ SKUs) | Mega Menü, organisiert nach Anwendungsfall + Filterung | Lange, flache Dropdowns |
Dokumentation | Drei-Fenster-Layout (linkes vertikales Navigationsmenü / Inhalt / rechtes Inhaltsverzeichnis) | Nur Top-Navigation |
Inhalt / Medien | Top-Navigation + untere mobile Navigation + Facettensuche | Nur Sidebar-Navigation auf mobilen Geräten |
Multi-Audience-Institutional | Kleine Top-Navigation + Quick Links + Zielgruppen-Subdomains | Alle Zielgruppen in einer Navigation zusammenfassen |
Langformige Veröffentlichung | Minimale globale Navigation + starke Artikel-Navigation (sticky TOC, Sprunglinks) | Schweres globales Navigationsmenü, das die Aufmerksamkeit stehlt |
Diese Matrix ist die Kurzform, um die Website-Menügestaltung richtig zu machen - wählen Sie die Zeile aus, die zu Ihrem Seiten-Typ passt und die restlichen Navigation-Entscheidungen folgen.
Wie man Navigation erstellt, die mit Wegic funktioniert
Eine gute Navigation zu erstellen ist wirklich kein Design-Übung - es ist eine Inhaltsarchitektur-Übung. Die Bezeichnungen und Struktur sind wichtiger als die visuelle Darstellung. Die 10 Website-Navigation-Beispiele oben teilen diese Disziplin: Sie haben ihren Ruf durch Informationarchitektur, nicht durch visuelles Design verdient.
Wegic ist ein konversationelles KIWebsite-Wachstumssystem, das eine Site aus einem Chat-Brief generiert, einschließlich einer sinnvollen Navigationsstruktur, basierend darauf, was Ihre Site tatsächlich enthält. Anstatt Seiten hinzuzufügen und sie dann unbeholfen in ein Vorlagen-Nav zu passen, baut die KI die IA aus Ihrer Beschreibung auf.
Phase 1: Briefen Sie Ihre KI
Öffnen Sie Wegic und chatten Sie mit Kimmy, Ihrem KI-Projektmanager. Nutzen Sie eines der 10 Beispiele oben als Referenz:
"Erstellen Sie mir eine Dokumentationsseite wie GitHub Docs - Dreifach-Ansicht, links Navigation gruppiert nach Produkt, in-Page-Inhaltsverzeichnis auf der rechten Seite, Breadcrumbs über jedem Artikel, dauerhaft zusammengeklappte Abschnitts-Zustand. Suchleiste oben in der linken Navigation."
Oder für eine Inhaltsseite:
"Erstellen Sie mir eine Rezeptseite mit NYT Cooking-artiger Filterung. Obernavigation mit Rezepten / Sammlungen / Gespeicherte / Konto. Startseite öffnet mit einer Suchleiste, dann horizontales Scrollen von kuratierten Sammlungen, dann gefilterte Filterung nach Küche / Diät / Zeit / Zutat."
Phase 2: KI-Assembly in unter einer Minute
Wegic generiert eine vollständig responsive Mehrseiten-Website mit der beschriebenen Navigationsmuster - klebend auf Desktop, am unteren Bildschirm auf Mobilgeräten, Breadcrumbs an der richtigen Stelle, aktueller Seiten-Indikator. Für eine Schritt-für-Schritt-Anleitung der konversationellen Generierung, siehe den Wegic-Tutorial.
Phase 3: Bearbeiten per Konversation
"Fügen Sie ein Quick Links Dropdown in die Obernavigation mit den 6 häufigsten Aufgaben hinzu. Machen Sie die Mobilnavigation am unteren Bildschirm. Fügen Sie Breadcrumbs zu allen Unterpagen hinzu."
Wegic schlägt 2–3 Designoptionen vor, bevor es angewandt wird - damit Sie nicht versehentlich Ihre Navigationszustand zerstören.
Phase 4: Veröffentlichen mit Hosting enthalten
Klicken Sie auf Veröffentlichen. Hosting, benutzerdefinierte Domain, automatisch generiertes
sitemap.xml und SEO-Metadaten sind alle enthalten. Für einen Vergleich, wie Wegic gegen andere KI-Baustellen auf Informationarchitektur speziell steht, siehe unsere detaillierte Bewertung von 5 Web-Design-KI-Tools. Für mehr Inspiration über andere Kategorien, siehe unsere Aesthetic-Websites-Sammlung.
Fazit: Die besten Website-Navigation-Beispiele sind unsichtbar
Alle 10 Website-Navigation-Beispiele in dieser Anleitung teilen eine Eigenschaft - zu keinem Zeitpunkt muss der Besucher darüber nachdenken, wie er sich bewegt. Jeder Link ist dort, wo sie ihn erwarten. Jeder Label bedeutet, was er sagt. Jede Seite sagt ihnen, wo sie sind und was als nächstes kommt.
Das ist der Standard. Navigation ist ein Erfolg, wenn niemand darüber spricht. Wählen Sie die Muster aus den Website-Navigation-Beispielen oben, die zu Ihrem Seiten-Typ passen, kopieren Sie mit Disziplin und überprüfen Sie sich selbst gegen die fünf häufigsten Fehler. Das Ergebnis wird 90 % der Konkurrenz schlagen - die größtenteils auf denselben wiederholt inspirierten Vorlagen gebaut ist.
Für mehr Inspiration über Kategorien, siehe unsere umfassendere Website-Startseite-Beispiele-Anleitung und unsere responsive Website-Beispiele-Sammlung.
👇 Klicken Sie unten, um mit Wegic zu starten
Häufig gestellte Fragen
Was sind die wichtigsten Website-Navigation-Best Practices?
Sechs universelle Website-Navigation-Best Practices, abgeleitet aus den 10 Website-Navigation-Beispielen oben: (1) begrenzen Sie die Top-Level-Elemente auf 5–7; (2) verwenden Sie klare Sprachbezeichnungen, die Besucher erkennen, nicht interne Organisationsbezeichnungen; (3) beinhaltet einen aktuellen Seiten-Indikator auf jedem Navigations-Element; (4) machen Sie die Breadcrumb-Navigation sichtbar auf jeder Seite, die mehr als zwei Ebenen tief ist; (5) stellen Sie sicher, dass die Mobilnavigation den unteren Bildschirm für Content-Apps verwendet und mit einem Daumen funktioniert; (6) platzieren Sie nicht-konversionsbezogene Inhalte (About, Careers, Press) im Footer, nicht in der Obernavigation.
Was ist der Unterschied zwischen primärer und sekundärer Navigation?
Primäre Navigation ist das Menü der obersten Ebene – die 5–7 wichtigsten Ziele auf Ihrer Website, die auf jeder Seite vorhanden sind. Primäre Navigation ist alles andere: Fußzeilenlinks, Tabellen der Inhaltsverzeichnisse auf der Seite, "verwandte Inhalte"-Zeilen, Breadcrumbs, gefilterte Navigationen, Sidebar-Navigation innerhalb spezifischer Abschnitte. Der Fehler, den die meisten Websites machen, ist, die sekundäre Navigation in die primäre zu drängen, wodurch die obere Navigation unleserlich wird. Entscheiden Sie, was primär ist, basierend auf dem Besucherintention, nicht auf internen Politiken.
Sind Mega-Menüs 2026 eine gute Idee?
Manchmal. Mega-Menü-Beispiele wie jenes von IKEA funktionieren, weil die Website 12.000+ Produkte hat, die tatsächlich kategorisiert werden müssen. Mega-Menüs scheitern, wenn Websites sie als Ablageort für organisatorische Links verwenden, die nicht in der oberen Navigation gehören. Drei Anzeichen dafür, dass Ihr Mega-Menü falsch ist: (1) Sie haben weniger als 100 SKUs, aber ein Mega-Menü mit 4 Spalten; (2) Das Mega-Menü enthält "Über uns" oder "Presse"; (3) Kategorien innerhalb des Mega-Menüs haben nur 1–2 Elemente. Wenn eines davon zutrifft, ersetzen Sie das Mega-Menü durch ein einfacheres Dropdown-Menü-Design oder teilen Sie den Inhalt auf, um die Fußzeilen-Navigation zu nutzen.
Was ist mit Hamburger-Menüs?
Hamburger-Menü-Muster sind für mobile Geräte geeignet (wo horizontaler Raum begrenzt ist), aber ungeeignet für Desktop-Computers (wo Sie normalerweise genug Platz haben, um die vollständige Navigation anzuzeigen). Ausnahme: markenbasierte Portfolio-Websites oder Single-Page-Apps, bei denen Minimalismus die gesamte Designaussage ist. Für die meisten B2B-, E-Commerce-, Content- und SaaS-Websites versteckt ein Hamburger-Menü die Entdeckbarkeit hinter einem Klick, den der Besucher vermuten muss.
Sollte ich ein feststehende Navigation verwenden?
Feststehende Navigation ist geeignet, wenn Ihr Besucher durch lange Inhalte scrollt und während des Scrollens möglicherweise anders navigieren möchte. Sie ist geeignet für langformige Artikel, Dokumentationen und Produktseiten. Sie ist überflüssig für kurze Marketingseiten. Drei Regeln, falls Sie sie verwenden: (1) Halten Sie die Höhe der feststehenden Navigation auf max. 56–64 px; (2) Verstecken Sie sie beim Scrollen nach unten und zeigen Sie sie beim Scrollen nach oben, um Platz auf dem Bildschirm zurückzugewinnen; (3) Stellen Sie sicher, dass die feststehende Navigation ein sichtbares aktuelles Abschnitts-Indikator hat, wenn Ihre Seite mehrere Anchor-Abschnitte hat.
Wie handle ich mit der Navigation auf einer inhaltsschweren Website?
Drei Muster funktionieren, je nach Inhaltstyp. Für eine Informationarchitektur, die hierarchisch ist (z. B. Dokumentationen), verwenden Sie eine Dreispalten-Ansicht wie bei GitHub Docs. Für explorativen Inhalt (z. B. Rezepte, Artikel) verwenden Sie Suche + kuratierte Sammlungen + gefilterte Navigationen wie bei NYT Cooking. Für Referenzinhalte (z. B. Enzyklopädien, Wissensbasen) verwenden Sie Sidebar-Navigation mit starken Tabellen der Inhaltsverzeichnisse im Artikel wie bei Wikipedia. Die Form Ihres Inhalts bestimmt die richtige Navigation, nicht umgekehrt.
Welches ist das beste mobile Navigation-Muster 2026?
Für Inhalts- und Sozial-Apps sind untere Navigationsleisten effektiver als die obere Navigation – sie sind leichter mit dem Daumen auf modernen, langen Handys zu erreichen. Für E-Commerce ist die obere Navigation mit einem Hamburger und einem dauerhaften Suchfeld/Warenkorb besser. Für Dokumentation und Referenzseiten ist ein einrollender linker Schubladenmenü, ausgelöst durch ein Hamburger-Menü, am besten. Die einzige Regel: Vermeiden Sie es, das Vergrößern per Fingertipp auf mobilen Geräten zu deaktivieren, und machen Sie die Tipptasten nie kleiner als 44 × 44 Pixel. Beides sind Barrierefreiheitsverstöße und Gründe dafür, dass Ihr responsiveNavigation-Menü bei mobilen Audits scheitert.
Welche sind die besten Navigationstools für Designer 2026?
Für Inspirationsgalerien: Navbar.gallery, Footer.design, Land-book. Für interaktives Design: Figma's Komponentenbibliothek und Prototyping-Tools. Für Tests: BrowserStack und echte Geräte-Tests. Für die Implementierung: Tailwind UI, Headless UI und Radix UI liefern hervorragende zugängliche Navigationskomponenten. Für Nicht-Entwickler, die von Grund auf bauen, generieren AI-Website-Baukästen wie Wegic Navigationsmuster basierend auf Ihrer Inhaltsbeschreibung, anstatt von einem Template auszugehen – was oft bessere Website-Navigation-Ideen als das Auswählen aus einer festen Bibliothek erzeugt.
