Website-Navigation: Aufbau, Struktur und typische Stolperfallen

Wenn Menschen eine Website besuchen, haben sie ein Ziel.

Sie wollen etwas Bestimmtes finden – eine Information oder ein Angebot.

Und wenn das nicht gelingt, sind sie schnell wieder weg.

Studien zeigen: 38 % der Besucher achten beim ersten Eindruck auf die Navigation, und 42 % verlassen eine Website, wenn sie schwer bedienbar ist.¹

Eine klare Navigation ist wie ein Wegweiser.

In diesem Beitrag erfährst du, wie du deine Website-Navigation so gestaltest, dass sie intuitiv funktioniert – auf Desktop und mobil.

Was ist eine Website-Navigation – und warum ist sie so wichtig?

Zur Website-Navigation gehören alle Elemente, die Besucher dabei unterstützen, sich auf deiner Seite zurechtzufinden – vom Menü über Buttons bis zu internen Verlinkungen.

Du kannst dir das vorstellen wie im Baumarkt:
Oben hängen grosse Schilder mit klaren Bezeichnungen – Garten, Werkzeug, Bad.

Du weisst sofort, wohin du gehen willst, ohne gross nachzudenken.

Eine gute Navigation macht genau das möglich.

Fehlen diese Wegweiser oder sind sie missverständlich, irren wir umher.

Online bedeutet das: Die Besucher verlassen die Seite schnell wieder oder versuchen sich im besten Fall erst durchzuklicken.

Eine gut strukturierte Navigation gibt deinen Besuchern Sicherheit und Orientierung – und hilft gleichzeitig Suchmaschinen, deine Inhalte besser zu verstehen.

Welche Arten der Website-Navigation gibt es?

Die Navigation ist nicht einfach eine Leiste mit Links, sondern ein System aus mehreren Ebenen, die zusammenarbeiten.

Je nach Website können das verschiedene Bereiche sein: Hauptmenü, Footer oder Topmenü.

Hauptmenu

Es befindet sich meistens am oberen Rand deiner Website, horizontal angeordnet und meist direkt neben dem Logo.

Je nach Aufbau kann es beim Scrollen mitlaufen oder fix am oberen Bildschirmrand stehenbleiben.

So behalten Besucherinnen die Orientierung:
Sie wissen, wo sie sich befinden und wie sie zu anderen Bereichen oder zur Startseite zurückkehren können.

Am Desktop gehört das Hauptmenü sichtbar auf die Seite.

Es sollte nicht hinter Symbolen oder Icons versteckt werden, denn das kostet Besucher.

Sichtbare Menüs werden fast doppelt so oft genutzt – und führen Nutzer erfolgreicher ans Ziel.

Quelle: Nielsen Norman Group – „Hamburger Menus and Hidden Navigation Hurt UX Metrics“

Eine Studie der Nielsen Norman Group² zeigt: Wird die Hauptnavigation hinter einem sogenannten Hamburger-Menü verborgen, nutzen sie nur rund 27 % der Besucher.

Das Hamburger-Menü hat seinen Namen übrigens vom Symbol: drei horizontale Linien, die an ein Burger-Brötchen mit Füllung erinnern und sollte nur auf Handy oder Tablet benutzt werden.

Neben der klassischen horizontalen Variante gibt es auch die vertikale Navigation, meist am linken Rand der Seite.

Früher war sie weit verbreitet, heute kommt sie seltener vor, weil daneben der eigentliche Inhalt weniger Platz hat.

Das Footermenü

Dann gibt es meistens in der Fusszeile noch ein Navigationsmenü.

Hier können Seiten wie Datenschutz und Impressum untergebracht werden.

Je nach Aufbau kannst du dort auch weniger wichtige oder doppelte Navigationspunkte platzieren. 

Viele Besucher scrollen gezielt bis nach unten und suchen dort nach Links oder zusätzlichen Informationen.

Er trägt ausserdem zur Verbesserung des Suchmaschinenoptimierung bei, da es zusätzliche interne Links setzt.

Das Topmenü

Manchmal siehst du über dem Hauptmenü noch ein kleineres Menü, das ganz zuoberst auf der Seite steht.

Dort finden Punkte Platz, die wichtig sind, aber nicht in die Hauptnavigation gehören – zum Beispiel Login oder Sprachauswahl.

Das Topmenü ist bei kleineren Websites unnötig.

Welche Seiten gehören in deine Navigation?

Neben den üblichen Seiten wie Über mich, Angebote oder Kontakt gibt es bei dir wahrscheinlich noch weitere Inhalte.

Notiere dir alles, was du auf deiner Website zeigen möchtest – auch rechtliche Seiten wie Impressum und Datenschutz.

Wenn du die Liste vor dir hast, prüfe sie kritisch.

Streich alles, was nicht unbedingt nötig ist.

Nicht alles was du anbietest, muss auf deine Website – und schon gar nicht ins Hauptmenü. Hier sollen nur die wichtigsten Navigationspunkte stehen.

Ich weiss aus der Arbeit mit Kundinnen und aus eigener Erfahrung: Dieser Schritt ist hart. Oft wird zu wenig gestrichen.

Aber je mehr Punkte im Hauptmenü stehen, desto unübersichtlicher wird es. Weniger Auswahl sorgt dafür, dass sich deine Besucher wohlfühlen statt überfordert zu sein.

Hast du Themen, auf die du nicht verzichten möchtest, die aber nicht ins Hauptmenü müssen? Streiche sie nicht ganz – notiere sie einfach auf einem zweiten Blatt.

Möglicherweise ergeben sich daraus Blogartikel oder sie passen in die Fusszeile.

Maximal 5–7 Menüpunkte in der Hauptnavigation

In der Hauptnavigation sollten es nicht mehr als fünf bis maximal sieben Punkte sein.
Das wirkt übersichtlich und hilft deinen Besuchern, sich schnell zurechtzufinden.

Die sogenannte Millersche Zahl geht auf den Psychologen George A. Miller zurück.

Er fand bereits in den 1950er-Jahren heraus, dass Menschen im Durchschnitt nur rund sieben Einheiten gleichzeitig erfassen können – manchmal etwas mehr, manchmal weniger.

Überträgst du das auf deine Website, wird klar: Je mehr Menüpunkte du hast, desto grösser ist die mentale Belastung für deine Besucher.

Bleibst du dagegen bei wenigen, bleibt der Überblick – und die Wahrscheinlichkeit steigt, dass sie tatsächlich weiterlesen oder klicken.

Auch unter den Angeboten in der zweiten Ebene solltest du es nicht übertreiben.

Zwei Ebenen genügen vollkommen.

Mehr wäre nicht nur unübersichtlich, sondern vor allem am Handy schwer zu bedienen.

Die Begriffe deiner Website-Navigation

Jetzt beginnt die Suche nach den richtigen Begriffen.

Sie sollen deinen Besucherinnen sofort zeigen, was sie erwartet, wenn sie klicken.

Gleichzeitig dürfen sie ruhig Begriffe enthalten, nach denen gesucht wird – aber im Vordergrund steht, dass sie verständlich und eindeutig sind.

Überlege dir, mit welchen Worten deine Kundinnen dein Angebot beschreiben würden.

Frag im Zweifel nach – wir selbst sind oft zu nah dran und verwenden Begriffe, die Aussenstehende nicht verstehen. 

Hilfreich ist auch ein Blick in Foren oder Facebook-Gruppen deiner Zielgruppe: Welche Wörter tauchen dort häufig auf?

Wenn du möchtest, kannst du deine Begriffe mit einem Keyword-Tool wie Ubersuggest prüfen, um zu sehen, wie oft danach gesucht wird.

Das ist kein Muss, aber manchmal eine gute Orientierung.

Tipp: Hier ist nicht der richtige Ort für kreative Wortspiele.

Deine Besucher wollen nicht raten, was sich hinter einem Menüpunkt verbirgt.

Klare Begriffe sorgen dafür, dass sie schneller finden, was sie suchen – und sich gut aufgehoben fühlen.

Struktur in die Hauptnavigation bringen

Wenn du deine wichtigsten Seiten notiert hast, geht es darum, sie in eine sinnvolle Reihenfolge zu bringen.

Am einfachsten gelingt das mit Post-its:
Schreib jede Seite auf einen eigenen Zettel und ordne sie auf einem grossen Blatt oder an der Wand.

So kannst du sie beliebig verschieben, ergänzen oder zusammenfassen – bis die Struktur stimmig ist.

Wenn du lieber digital arbeitest, gibt es Tools, die genau das können.

Zum Beispiel octopus.do – dort lässt sich deine Website-Struktur mit wenigen Klicks aufbauen, verschieben und als Sitemap exportieren.

Das ist besonders hilfreich, wenn du später mit einer Webdesignerin oder Entwicklerin zusammenarbeitest.

Und wenn du magst, kannst du auch eine KI zur Unterstützung hinzuziehen.

Sie kann dir helfen, deine Seiten logisch zu gruppieren oder aufzeigen, wo noch Lücken in deiner Struktur sind.

Wichtig: In die Hauptnavigation gehören nur die zentralen Seiten.

Ob du zusätzlich einen Menüpunkt Home oder Start brauchst, hängt von deiner Zielgruppe ab.

Sind deine Besucher routinierte Internetnutzer, kannst du darauf verzichten.
Im Zweifel füge ihn lieber ein – er schadet nie.

Wie viele Ebenen soll deine Navigation haben?

Je flacher die Hierarchie deiner Navigation ist, desto übersichtlicher und klarer wirkt sie.

Zwei Ebenen reichen völlig aus. Mehr braucht es in der Regel nicht.

Gerade auf dem Handy werden zu viele Unterpunkte schnell unübersichtlich und erschweren die Bedienung.

Halte deine Navigation deshalb so einfach wie möglich, damit Besucher mit wenigen Klicks ans Ziel kommen.

Visuelle Orientierung in der Navigation

Eine gute Navigation führt nicht nur durch Worte, sondern auch durch klare visuelle Signale.

Sie zeigt Besucherinnen auf den ersten Blick, wo sie sich befinden und wohin sie klicken können.

Der aktuell ausgewählte Menüpunkt sollte sich deutlich abheben – etwa durch eine andere Farbe, Unterstreichung oder einen klaren Kontrast.

Feine Farbunterschiede allein reichen oft nicht aus, vor allem bei heller Umgebung oder eingeschränktem Sehvermögen.

Auch kleine Reaktionen wie Farbänderungen oder sanfte Übergänge, wenn man mit der Maus über einen Menüpunkt fährt oder ihn antippt, helfen bei der Orientierung.

Solche Rückmeldungen machen deine Navigation lebendig und intuitiv.

Mobile Navigation

Eine gute Navigation ist auch auf dem Handy entscheidend – vielleicht sogar noch mehr als am Desktop.

Denn auf kleinen Bildschirmen ist der Platz begrenzt, und zu viele Ebenen oder verschachtelte Menüs werden schnell unübersichtlich.

Prüfe, ab wann deine mobile Navigation aktiviert wird oder werden sollte.

Schon auf dem Tablet oder erst auf dem Handy?

Wichtig ist, dass sie gut funktioniert, leicht zu öffnen ist und sich problemlos wieder schliessen lässt.

Achte ausserdem darauf, dass die Schrift gross genug ist und die Klickflächen ausreichend Abstand haben – besonders für Besucher, die mit dem Daumen navigieren.

Das sogenannte Hamburger-Menü (die drei Linien oben rechts) ist heute Standard und sollte immer verwendet werden.

Es ist klar erkennbar, vertraut und funktioniert auf allen Geräten.

Wichtig ist, dass es grosszügig platziert ist, damit man es leicht antippen kann.

Barrierefreie Navigation

Eine moderne Website-Navigation sollte nicht nur gut aussehen, sondern auch barrierefrei sein.
 
Das heisst: Sie muss für möglichst viele Menschen nutzbar sein – auch für jene, die mit Tastatur oder Touch-Geräten arbeiten.

Achte deshalb auf gute Lesbarkeit und ausreichend Kontrast.

Menüpunkte sollten mindestens 16 Pixel gross sein, damit sie auch auf kleineren Bildschirmen gut lesbar und antippbar bleiben.

Der Kontrast zwischen Schrift und Hintergrund sollte klar erkennbar sein – auch bei heller Umgebung.

Ebenso wichtig ist die Bedienbarkeit ohne Maus.

Die Navigation sollte sich vollständig mit der Tastatur steuern lassen, und der Fokus muss sichtbar sein, wenn man sich mit der Tab-Taste durchklickt.

Ein sogenannter Skip-Link am Seitenanfang hilft, direkt zum Hauptinhalt zu springen.

Auch auf dem Handy braucht es Barrierefreiheit:

Klickflächen sollten gross genug sein (mindestens 44 × 44 Pixel) und genügend Abstand zueinander haben.

Vermeide Menüs, die nur über Hover-Effekte funktionieren – auf Touch-Geräten sind sie schwer bedienbar.

Wenn du deine Navigation testen möchtest, nutze ein Tool wie Silktide (eine Erweiterung für Chrome).

Damit kannst du schnell prüfen, ob Kontraste, Lesbarkeit und Tastatursteuerung stimmen.

Footer-Navigation

Im Footer können neben Impressum und Datenschutz auch weitere Seiten verlinkt werden.

Zum Beispiel solche, die in der Hauptnavigation keinen Platz gefunden haben oder weniger wichtig sind.

Hier kannst du auch doppelte Navigationspunkte unterbringen, damit Besucher am Ende einer Seite nicht nach oben scrollen müssen.

Viele Nutzer schauen bewusst in die Fusszeile, wenn sie etwas Bestimmtes suchen – etwa Kontaktinformationen oder rechtliche Hinweise.

Häufige Fragen zur Website-Navigation

¹ Top Design Firms, 2021 (zitiert via HubSpot Web-Design-Statistiken 2023)

² Nielsen Norman Group, Hamburger Menus and Hidden Navigation Hurt UX Metrics, 2016

Überarbeitet im November 2025