Die Hauptnavigation ist das Menü im Header, das die Hauptbereiche einer Website zeigt. Sie sieht auf jeder Seite gleich aus und markiert, in welchem Bereich der Besucher sich gerade befindet. Sie ist der wichtigste, aber nicht der einzige Weg durch eine Website.
- Hauptnavigation
Menü im Header, das die Hauptbereiche einer Website zeigt und auf jeder Seite gleich ist.
Beispiel: „In der Hauptnavigation stehen Leistungen, Referenzen, Agentur und Kontakt.“Auch: Main Navigation oder Primärnavigation. Der Zusatz grenzt sie gegen die Meta-Navigation und die Footer-Navigation ab.
Abgrenzung zur Meta-Navigation: Die Hauptnavigation führt zum Angebot, die Meta-Navigation zu Nebenwegen wie Login, Sprachwahl oder Kontaktformular.
Wie viele Punkte hineingehören
Fünf bis sieben Punkte sind der Richtwert. Darunter wirkt das Angebot dünn, darüber wird die Auswahl zur Suchaufgabe. Wer mehr Bereiche hat, bündelt sie und zeigt die Unterpunkte in einem Untermenü oder einem Mega Menü.
Der Kontaktpunkt steht dabei gern am Ende und optisch abgesetzt, etwa als Schaltfläche. So bleibt er erkennbar, ohne die übrigen Punkte zu überstrahlen.
Ein zweiter Prüfstein ist die Reihenfolge. Der erste und der letzte Punkt einer Leiste bleiben am besten in Erinnerung, die mittleren am schlechtesten. Was verkauft werden soll, gehört deshalb an den Anfang oder ans Ende und nicht dazwischen.
Das Markup
Die Hauptnavigation ist ein nav-Element mit einer Liste darin. Das aria-label unterscheidet sie von den anderen nav-Elementen der Seite, und aria-current markiert den aktuellen Bereich, damit ein Screenreader den Standort ansagen kann.
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/leistungen/" aria-current="page">Leistungen</a></li>
<li><a href="/referenzen/">Referenzen</a></li>
<li><a href="/agentur/">Agentur</a></li>
</ul>
</nav>Die Markierung des aktuellen Punktes darf dabei nicht allein über die Farbe laufen. Eine zusätzliche Linie oder ein fetterer Schnitt macht sie auch bei schwachem Kontrast erkennbar.
Benennung nach dem, was der Besucher sucht
Menüpunkte heißen oft wie die Abteilungen des Unternehmens. Besucher suchen aber nach ihrem Anliegen. „Leistungen“ ist verständlich, „Geschäftsbereiche“ verlangt Übersetzungsarbeit. Aus unserer Arbeit an über 2.500 Website-Projekten ist das die Änderung, die am schnellsten wirkt und am wenigsten kostet.