Wenn Besucher:innen auf einer Website suchen müssen, statt zu finden, liegt das oft nicht am Inhalt, sondern an der Navigation. Ein Menü ist kein Deko-Element, sondern ein Wegweiser: Es sagt, was diese Website anbietet, wie alles zusammenhängt und wo der nächste sinnvolle Schritt liegt. Gute Navigation reduziert Stress, verhindert Fehlklicks und macht Inhalte sichtbar, die sonst übersehen werden.
Der Schlüssel ist nicht „mehr Links“, sondern bessere Entscheidungen: Welche Bereiche sind wirklich wichtig, wie werden sie benannt, und wie sieht das Menü auf dem Handy aus? Die folgenden Abschnitte führen Schritt für Schritt von der Struktur bis zur Feinkontrolle – mit konkreten Beispielen für typische Seiten wie Agenturen, Shops oder SaaS-Angebote.
Welche Aufgaben ein Menü erfüllen muss
Orientierung geben, ohne zu überfordern
Navigation ist dann gut, wenn sie zwei Fragen schnell beantwortet: „Wo bin ich?“ und „Was kann ich hier als Nächstes tun?“ Das klappt, wenn die Struktur auf wenige klare Hauptpunkte reduziert ist und Unterseiten logisch gruppiert sind. Viele Websites verlieren Nutzer:innen, weil zu viele gleich wichtige Punkte nebeneinander stehen oder weil Unterpunkte nicht erwartbar sind.
Ein hilfreiches Bild: Ein Menü ist wie ein Inhaltsverzeichnis. Es soll nicht alles zeigen, sondern die wichtigsten Kapitel – und einen klaren Weg zu Details anbieten.
Vertrauen stärken durch Konsistenz
Menschen lernen Bedienmuster sehr schnell. Wenn die Navigation auf jeder Seite gleich aussieht, gleich funktioniert und sich gleich benennt, entsteht Sicherheit. Änderungen im Stil (z. B. mal links, mal oben), wechselnde Begriffe („Kontakt“ vs. „Anfrage“) oder springende Hervorhebungen wirken unruhig und kosten Aufmerksamkeit.
Konversion unterstützen, ohne zu drängeln
Navigation soll nicht nur informieren, sondern auch zu sinnvollen Aktionen führen. Ein gut platzierter Einstieg in „Kontakt“, „Demo“ oder „Angebot“ kann helfen – wichtig ist, dass dieser Weg nicht gegen die restliche Logik arbeitet. Ein Button im Menü ist sinnvoll, wenn er zur häufigsten Absicht passt. Wie Call-to-Actions im Detail geplant werden, erklärt Call-to-Action Buttons – Größe, Text und Platzierung.
Informationsarchitektur: erst sortieren, dann gestalten
Von Inhalten zu Rubriken: so entsteht eine robuste Struktur
Bevor in Figma, Sketch oder im CMS gebaut wird, braucht es eine Liste der Inhalte. Danach folgt die Gruppierung: Welche Seiten gehören zusammen, welche sind Unterpunkte, welche müssen aus dem Menü raus (z. B. Impressum) und gehören in den Footer?
Typische Hauptbereiche (je nach Website): Leistungen/Produkte, Referenzen, Preise, Über uns, Wissen/Blog, Kontakt. Wichtig ist nicht die „richtige“ Liste, sondern eine Struktur, die die Sicht der Nutzer:innen trifft.
Menübegriffe testen: Alltagssprache statt interner Wörter
Navigation scheitert oft an Bezeichnungen. Interne Teambegriffe („Solutions“, „Modules“, „Platform“) klingen für Außenstehende schnell unklar. Besser sind Worte, die im Alltag sofort verstanden werden. Ein einfacher Test: Kann eine Person in 5 Sekunden erklären, was sich hinter einem Menüpunkt verbirgt, ohne klicken zu müssen?
Hilfreich ist außerdem: gleiche Wortarten nutzen (z. B. nur Substantive) und pro Punkt nur ein Konzept. „Leistungen & Tools“ wirkt wie zwei Dinge in einem.
Entscheidungsbaum für die richtige Menüstruktur
- Gibt es mehr als 6 Hauptpunkte?
- Ja: Inhalte bündeln (z. B. „Leistungen“ als Oberpunkt) oder weniger wichtige Punkte in den Footer verschieben.
- Nein: Struktur kann oft ohne Dropdown funktionieren.
- Gibt es Unterseiten, die sehr häufig besucht werden?
- Ja: Diese Unterseiten direkt in die Hauptnavigation oder als prominenten Unterpunkt (erste Ebene) aufnehmen.
- Nein: Unterseiten im Dropdown/Untermenü gruppieren.
- Unterscheiden sich Zielgruppen stark (z. B. Privat vs. Business)?
- Ja: Segment-Einstiege prüfen (z. B. „Für Unternehmen“, „Für Privat“) oder eine klare Auswahlseite.
- Nein: Ein gemeinsames Menü mit klaren Rubriken reicht meist.
Desktop, Mobile, Sticky: Muster, die wirklich funktionieren
Top-Navigation, Sidebar oder Mega-Menü?
Für die meisten Websites ist eine horizontale Top-Navigation der Standard – und das ist gut so. Standardmuster sparen Erklärbedarf. Eine Sidebar-Navigation passt eher zu Anwendungen (Dashboards) oder Dokumentationen, wo viele Punkte dauerhaft sichtbar sein müssen.
Ein Mega-Menü (großes Dropdown mit Spalten) kann sinnvoll sein, wenn viele Kategorien vorhanden sind (z. B. Shop oder umfangreiche Corporate Site). Dann sollte es aber klar strukturiert sein: Überschriften pro Gruppe, wenige Ebenen, keine „Link-Wand“.
Mobile Navigation: das Menü ist ein eigener Screen
Auf dem Smartphone ist Navigation nicht „kleiner“, sondern anders. Ein Hamburger-Icon (drei Striche) ist verbreitet, aber nur gut, wenn dahinter eine klare Liste liegt. Wichtig: genug Abstand zwischen Einträgen, klare Hierarchie und sichtbare Rückwege bei Untermenüs.
Für mobile Menüs gilt: je weniger Ebenen, desto besser. Wenn ein Menü drei Ebenen tief wird, lohnt sich oft eine alternative Struktur (z. B. Themen-Seite mit Kacheln statt verschachtelter Listen).
Sticky Header: hilfreich, wenn er nicht stört
Ein „sticky“ Header (bleibt beim Scrollen oben) kann Orientierung geben, vor allem bei langen Seiten. Er darf aber nicht zu viel Höhe einnehmen und sollte beim Scrollen nicht permanent Inhalte verdecken. Häufig ist eine kompakte Sticky-Variante sinnvoll: Logo kleiner, weniger Elemente, klare Aktion.
Visuelle Hierarchie im Menü: Lesbarkeit vor Design-Effekt
Was zuerst gesehen wird: Reihenfolge, Abstände, Kontrast
Die Reihenfolge der Menüpunkte ist nie neutral. Am Anfang und am Ende wird am ehesten geklickt. Deshalb gehören die wichtigsten Einstiege nach vorn und der „Abschluss“ (z. B. Kontakt) nach hinten. Dazwischen: logisch gruppieren.
Auch Abstände sind Navigation: Genug Platz zwischen Punkten reduziert Fehlklicks und macht die Struktur „scanbar“ (schnell erfassbar). Wer Abstände systematisch plant, arbeitet besser mit einem festen Spacing-System. Passend dazu: Designsystem-Abstände im UI – Spacing-System klar planen.
Aktiver Zustand und „Du bist hier“-Signale
Nutzer:innen brauchen Rückmeldung, wo sie sich befinden. Das heißt: aktueller Menüpunkt ist klar markiert (Farbe, Unterstreichung oder Hintergrund) und funktioniert überall gleich. Wichtig ist, dass diese Markierung nicht nur über Farbe läuft, damit sie auch bei Sehschwächen erkennbar bleibt. Für die Gestaltung von Kontrasten und gut lesbaren Zuständen hilft UI-Design mit Farbkontrasten optimieren – lesbare Interfaces gestalten.
Icons im Menü: nur wenn sie wirklich helfen
Icons können Navigation schneller machen, aber nur, wenn sie eindeutig sind. Ein „Haus“ für Startseite ist bekannt, viele andere Symbole sind interpretierbar. Wenn Icons genutzt werden, dann konsistent (gleiches Set, gleiche Strichstärke) und immer mit Text kombiniert. Ein Menü nur mit Icons ist für viele Websites unnötig schwer verständlich.
Umsetzung in Figma/Sketch: vom Menü zur wiederverwendbaren Komponente
Komponenten bauen, statt Screens zu kopieren
Navigation ändert sich im Projektverlauf fast immer. Wer sie als saubere Komponente anlegt, spart später Zeit und verhindert Abweichungen. Dazu gehören: Normalzustand, Hover, Aktiv, Fokus (Tastatur), sowie Varianten für Desktop und Mobile.
In Figma ist dafür Auto Layout praktisch: Elemente behalten Abstände, wenn Textlängen variieren oder wenn Menüpunkte hinzukommen. Für flexible Bausteine ist auch ein komponentenbasierter Ansatz hilfreich: Komponentenbasiertes Webdesign – UI-Bibliotheken strukturiert aufbauen.
Benennung und Varianten: damit Teams nicht raten müssen
Komponenten sollten eindeutig benannt sein (z. B. „Nav / Item“, „Nav / Dropdown“, „Header / Desktop“, „Header / Mobile“). Varianten sind sinnvoll, wenn sie echte Zustände abbilden. Ein typischer Fehler ist, zu viele „Design-Spielarten“ zu bauen, die später niemand konsequent pflegt.
Hilfreich ist außerdem ein kleines Set an Regeln: Welche Schriftgröße ist im Menü gesetzt, wie lang dürfen Labels werden, wann wird gekürzt, und wie verhält sich die Navigation bei zwei Zeilen? Diese Regeln machen Informationsarchitektur im Design sichtbar.
Typische Probleme – und wie sie in der Praxis gelöst werden
„Zu viele Punkte“: Prioritäten statt Kompromissliste
Wenn viele Stakeholder Inhalte im Menü wollen, wächst die Navigation schnell unkontrolliert. Die Lösung ist nicht „alles rein“, sondern eine klare Priorisierung: Top-Navigation nur für Kernthemen, sekundäre Themen in Footer, Support-Bereich oder auf thematischen Übersichtsseiten.
„Dropdowns funktionieren auf Touch nicht“: Interaktion sauber planen
Hover (Mouseover) ist auf Touch-Geräten nicht zuverlässig. Dropdowns sollten deshalb per Klick öffnen und sich klar schließen lassen. Auch sollte das Menü ohne „pixelgenaues“ Treffen funktionieren: genug Abstand und große Touch-Flächen helfen.
„Menü sieht gut aus, aber niemand klickt“: Labels und Erwartung prüfen
Wenn Klicks ausbleiben, ist oft der Begriff das Problem. Beispiel: Statt „Insights“ lieber „Wissen“ oder „Ratgeber“. Statt „Solutions“ lieber „Leistungen“. Wichtig: Begriffe dürfen ruhig unspektakulär sein, solange sie klar sind. Ein Menü ist kein Werbetext.
Kurzer Ablauf für die nächste Navigations-Iteration
- Alle Seiten/Angebote sammeln und als Liste sortieren.
- Maximal 4–6 Hauptbereiche festlegen, Rest bündeln oder in den Footer verschieben.
- Menübegriffe in Alltagssprache formulieren und intern gegenlesen lassen (ohne Kontext erklären lassen).
- Desktop- und Mobile-Navigation als Komponenten anlegen (Zustände inkl. Fokus).
- Aktiven Zustand sichtbar machen und überall gleich nutzen.
- Zum Schluss prüfen: Passt die Navigation zur Seitenpriorität (wichtigste Wege zuerst)?
Vergleich: Dropdown, Mega-Menü, Off-Canvas
| Muster | Vorteile | Nachteile | Gut geeignet für |
|---|---|---|---|
| Dropdown (klassisch) | Schnell, vertraut, wenig Platzbedarf | Kann auf Mobile unübersichtlich werden | Websites mit wenigen Unterseiten pro Bereich |
| Mega-Menü | Viele Kategorien auf einen Blick, gute Gruppierung möglich | Kann erschlagen, braucht klare Struktur | Shops, umfangreiche Corporate Websites |
| Off-Canvas (seitlich einschiebend) | Guter Platz für Mobile, kann Zusatzinfos aufnehmen | Versteckt Inhalte, braucht klare Hierarchie | Mobile-first Websites, Apps, Portale |
Häufige Fragen aus Projekten
Wie viele Menüpunkte sind „normal“?
Es gibt keine fixe Zahl, die immer richtig ist. In der Praxis funktionieren wenige Hauptpunkte besser, weil sie schneller scanbar sind. Wenn es mehr werden, hilft meist eine Bündelung in Oberkategorien oder eine klare Themen-Seite als Einstieg.
Sollte „Blog“ im Hauptmenü stehen?
Wenn Inhalte ein zentraler Teil der Strategie sind (z. B. SEO, Fachwissen, Support), ist ein sichtbarer Einstieg sinnvoll. Wenn der Blog nur gelegentlich gepflegt wird, reicht oft ein Link im Footer oder ein Bereich „Wissen“ mit ausgewählten Themen.
Ist eine Suchfunktion Teil der Navigation?
Ja, Suche ist ein Navigationswerkzeug. Sie ersetzt aber selten ein gutes Menü, sondern ergänzt es. Besonders sinnvoll ist Suche bei vielen Produkten, Dokumentationen oder großen Wissensbereichen.
Wie wird Barrierefreiheit bei Menüs berücksichtigt?
Wichtig sind klare Fokus-Zustände (Tastaturbedienung), verständliche Reihenfolge, ausreichende Kontraste und Menüs, die ohne Hover bedienbar sind. Außerdem sollten Labels eindeutig sein und nicht nur über Icons funktionieren. Wer tiefer einsteigen will: Barrierefreiheit im Web – WCAG verständlich, Design praxisnah.
Wann lohnt sich ein Sticky Header wirklich?
Vor allem bei langen Seiten, bei denen Nutzer:innen während des Scrollens häufig zu anderen Bereichen wechseln, oder wenn ein wichtiger Einstieg (z. B. Kontakt) gut erreichbar bleiben soll. Wenn der Header zu dominant ist, stört er mehr, als er hilft.
Welche Rolle spielt Navigation im Gesamt-Layout?
Sie bestimmt mit, wie Inhalte wahrgenommen werden: Eine klare, ruhige Navigation lenkt auf den Content statt auf sich selbst. Das sollte mit der restlichen Seitenstruktur zusammenspielen, etwa mit gutem Weißraum und klaren Blöcken.
