Dein Header mit Menü ist der erste Wegweiser auf Deiner Website. Ich verrate Dir, wie Du ihn klar strukturierst, um Deinen Besucher:innen Orientierung zu bieten.
So führst Du Deine Website-Besucher:innen wie an einer unsichtbaren Hand
Der Headerbereich einer Website ist der obere Abschnitt einer Seite – quasi der “Kopf” Deiner Website. Er ist auf allen oder den meisten (Unter-)Seiten identisch und enthält die wichtigsten Elemente für Orientierung und Navigation.
Typische Bestandteile eines Headers sind:
- Dein Logo oder Schriftzug:
Zur Wiedererkennung und als Link zur Startseite. - Deine Hauptnavigation:
Im Menü verlinkst Du Deine wichtigsten Seiten. Extrem wichtig: Responsiveness für die mobile Ansicht. - Eventuell ein Call to Action-Element:
Den letzten Menüpunkt hervorheben oder einen Button mit Handlungsaufforderung nutzen.
Warum ist der Header wichtig?
- Er sorgt für Klarheit und Orientierung.
- Nutzer:innen entscheiden in Sekunden, ob sie finden, was sie suchen.
- Ein gut strukturierter Header verbessert die Nutzer:innenfreundlichkeit Deiner Website und damit auch die Wahrscheinlichkeit, dass Deine Besucher:innen die von Dir gewollte Handlung (die sogenannte Conversion) ausführen.
Kurz gesagt: Der Header ist wie der Briefkopf Deiner Website – immer sichtbar, immer gleich, und voller wichtiger Orientierungspunkte.
Aber lass uns etwas tiefer einsteigen.
Inhalt
Ziel von Header & Navigation: Orientierung statt Überforderung
Dein Header hat genau zwei Aufgaben: Sofort Orientierung geben UND Menschen schnell zu den wichtigsten Seiten führen. Mehr muss er nicht. Und ehrlich: Mehr sollte er auch nicht.
Viele Selbstständige versuchen, alles gleichzeitig in den Header zu packen: Alle Angebote, diverse Unterseiten, die Links zu Social Media Kanälen, ein Loginbereich, die Anmeldung zum Newsletter, dazu noch ein Slogan, und, und, und … Das Ergebnis: Niemand weiß, wohin als erstes klicken.
Der Header soll aber als Wegweiser dienen und nicht wie ein Weihnachtsbaum in alle Richtungen strahlen. Wenn Du es schaffst, dass Besucher:innen in den ersten Sekunden denken: „Ah, ich verstehe, wo ich was finde – und ich sehe direkt, wo ich klicken muss“, dann macht Dein Header ganz viel richtig 😊
Inhalt & Aufbau: Was wirklich in Deinen Header gehört
Ein professioneller Header – speziell für Business Websites, die Kund:innen gewinnen sollen, besteht in der Regel aus folgenden Bestandteilen:
Logo
Das Logo dient der Wiedererkennung und führt verlinkt zur Startseite. Üblich ist die Platzierung oben links oder zentriert. Ein Klick auf das Logo sollte immer zur Startseite zurückführen, denn viele Nutzer:innen erwarten genau dieses Verhalten.
Wenn Du davon abweichst, erzeugt das Verwirrung – und das wirkt sich negativ auf Conversions aus. Falls Deine Zielgruppe allerdings nicht vertraut mit diesem Muster ist, kann ein zusätzlicher Menüpunkt „Start“/„Home“ sinnvoll sein.
Klare, reduzierte Haupnavigation
Hier gilt weniger ist wirklich mehr. Beschränke die Hauptnavigation auf etwa 5 bis 7 Punkte, bringe also wirklich nur Deine wichtigsten Seiten im Menü unter. Zweitrangige Seiten („Angebot 1“, „Angebot 2“ und „Angebot 3“) kannst Du in einem Dropdown-Menü (dann im zum Menüpunkt „Angebot“) unterbringen.
Eine typische Struktur für Soloselbstständige, Coaches & Dienstleister:innen sieht oft so aus (Reihenfolge mit Ausnahme von Start / Home ganz nach Deinem Gusto):
- Start oder Home* (optional, viele verzichten inzwischen darauf, weil das Logo sie zurück zu dieser Seite führt)
- Über mich
- Leistungen / Angebote / Arbeite mit mir
- Portfolio / Referenzen / Study Cases
- Blog / Magazin / Wissen
- Kontakt
- Newsletter
*Achtung: Wenn Deine Zielgruppe nicht vertraut mit der Funktion ist, dass das Logo zurück zur Startseite führt, dann nimm den Menüpunkt „Start“/„Home“ hinzu.
Für die mobile Ansicht, auf der einfach wenige Platz ist, sollte sich das Menü in ein Hamburger-Menü verwandeln, dass sich erst auf Klick in der ersten Ebene öffnet.
Was übrigens nicht in den Header gehört sind:
- Impressum
- Datenschutz
- AGB
- Cookierichtlinien
- Links zu Social Media
Diese parkst Du im Footer – dort werden sie erwartet, und rechtlich (Impressum, Datenschutz) ist das völlig in Ordnung. Social Media Links führen von Deiner Website weg, deshalb sollten sie auch nach unten. Wer da angekommen ist, darf gerne weiter- und von unsere Website wegsurfen 😉
Call to Action
Eine zusätzliche, klare und vor allem sichtbare Handlungsaufforderung (Call to Action, CTA) im Header – idealerweise als kontrastreicher Button rechts oben – kann Dein Hauptziel sofort erkennbar machen: „Termin buchen“, „Anfrage stellen“ oder „Kontakt“.
Warum sinnvoll? Weil Besucher:innen so ohne Suchen direkt wissen, was der nächste Schritt ist. Ein auffälliger Button hebt sich von normalen Links ab, lenkt die Aufmerksamkeit und erhöht die Wahrscheinlichkeit, dass Deine gewünschte Aktion ausgeführt wird.
Dieser Call to Action ist übrigens nicht in Stein gemeißelt, sondern kann sich mit der Zeit und Deiner Website ändern. Vielleicht legst Du am Anfang den Fokus darauf, neue Abonnent:innen für Deinen Newsletter oder Leser:innen für Deinen Blog zu gewinnen und willst später direkt zum Kennenlerngespräch einladen oder auf ein bestimmtes Produkt aufmerksam machen.
Weitere Tipps
Sticky Header
Wenn Deine Seite(n) sehr lang sind, macht es Sinn, mit einem sticky Header zu arbeiten. Dieser bleibt beim Scrollen ständig sichtbar.
Mit ein bisschen CSS kannst Du hier auch variieren: Der Header wird erst groß eingeblendet und wird beim Scrollen kleiner oder er verschwindet beim Scrollen nach unten, erscheint aber wieder, wenn man minimal nach oben scrollt.
Back to Top-Link
Ein Back to Top-Link ist ein kleiner, aber praktischer Shortcut, der Besucher:innen mit einem Klick oder Tap ganz nach oben zur Seitenanfang bringt. Besonders bei langen Seiten oder ausführlichen Angeboten spart er Zeit und verbessert die Nutzer:innenführung – statt mühsam nach oben zu scrollen, gelangen Interessent:innen schnell zurück zum Header, zur Navigation oder zum primären Call to Action.
Wichtig: sEr sollte ichtbar, aber dezent platziert (z. B. rechts unten), mobil gut erreichbar und mit klarer, vertrauter Auszeichnung (Pfeil nach oben) versehen sein.
Mobile Navigation
Achte auch darauf, dass die Navigation gut auf dem Smartphone (und Tablet) funktioniert. Mach das Hamburger‑Menü groß und gut klickbar, damit Daumen keine Präzisionsübung brauchen. Nutze ein Overlay oder ein Slide‑in für die Navigation, das den Fokus klar auf die Auswahl lenkt.
Sorge auch für ausreichend Abstand zwischen den Links, damit falsche Klicks ausbleiben. Dropdowns sollten maximal eine Ebene tief sein – kürzer ist übersichtlicher und besser fürs schnelle Finden.
Sprache und Wortwahl
Klarheit schlägt Kreativität. Besucher:innen scannen Deine Website eher, als dass sie en detail lesen, das gilt auch für den Header. Achte auf klare und vertraute Bezeichnungen, die sofort verständlich sind, statt Kunstbegriffen:
Also „Blog“ statt kreativ „Wortsalat“, „Start / Home“ statt ganz clever „Narnia“ oder „Glossar“ statt einem einfallsreichen „Erklärbär“ … Kreativ kannst Du dann auf der entsprechenden Unterseite werden 😉
Gestaltung
Beim Header mit Navigation gilt Funkion vor Schönheit. Achte auf eine klare, gut lesbare Schrift (ausreichend groß) und gegnügend Kontrast zum Hintergrund.
Für die User:innenexperience kannst Du die aktiven Seiten farbig und mit Unterstrich kennzeichnen, und für die anderen Menüpunkte einen Hovereffekt definieren (die Farbe und Unterstreichung ändert sich, wenn Du mit der Maus darüber fährst). So sorgst Du zusätzlich für eine bessere Orientierung, wo auf Deiner Website sich Deine Besucher:innen gerade befinden.
Barrierefreiheit
Achte darauf, dass das Menü semantisch auch als <nav>-Element ausgezeichnet ist. So erkennen Maschinen (Google, Screenreader, …), dass es sich um ein Menü und nicht einfach eine Linksammlung handelt.
Mit einem Skip to Content-Link kommen Menschen, die assistive Technnologien (Screenreader, alternative Eingabegeräte, …) verwenden, direkt zum Inhalt, ohne jedes Mal auf jeder Unterseite erst durch den Header mit der Navigation klicken zu müssen.
Praktische Links
Fazit: Unspektakulär, aber wirksam
Der beste Header fällt nicht auf – er funktioniert. Reduziere, strukturiere, platziere einen klaren CTA, denke an die Mobiloptimierung und an Accessibility. So ist Dein Header nicht nur einfach „da“, sondern leitet Deine Besucher:innen gezielt.
Checkliste
- ✅ Das Logo verlinkt zur Startseite
- ✅ Die Navigation enthält nur wirklich wichtige Punkte
- ✅ Die Menüpunkte sind verständlich
- ✅ Dropdowns gehen nur einen Level tief und werden gezielt eingesetzt
- ✅ Schriftgröße und Kontrast sind ausreichend für eine gute Lesbarkeit
- ✅ Aktive Seiten und Hoverzustände sind klar erkennbar
- ✅ Ein eventueller Call to Action ist klar formuliert und hebt sich ab
- ✅ Der Header funktioniert auch gut auf Mobile
- ✅ Ein Sticky Header und / oder ein Back to Top-Link sorgen für eine bessere Nutzungserfahrung
