Website-Header-Beispiele zum Bearbeiten und Kopieren
Website-Header-Beispiele
Website-Header-Beispiele: 10 Live-Designs mit HTML und CSS | We.Inc
10 eigene Website-Header-Designs zum Live-Bearbeiten: Logo- und Navigationslayouts, CTA-Platzierung, Sticky Header, Mobile-Menüs ohne JavaScript und eine Header-Checkliste.
Ein Website-Header ist der Streifen oben auf jeder Seite mit dem Logo, der Hauptnavigation und meist einer Aktionsschaltfläche. Gute Header beschränken sich auf fünf bis sieben Links, setzen das Logo links mit Link zur Startseite und klappen auf Smartphones zu einem beschrifteten Menü zusammen. Unten findest du zehn eigene Header-Designs mit bearbeitbarem Code.
Header-Layouts und wann du sie einsetzt
Layout
Ideal für
Achte auf
Logo links, Links rechts
Die meisten Unternehmenswebsites
Zu viele Links, die den CTA aus dem Bild schieben
Logo links, Links mittig, CTA rechts
SaaS- und Dienstleistungswebsites
Braucht genug Breite; früher zusammenklappen
Zentriertes Logo, Links darunter
Shops, Restaurants, Magazine
Höherer Header belegt mehr Bildschirm
Service-Leiste über der Hauptleiste
Lokale Unternehmen, die auf Anrufe setzen
Zwei Leisten auf dem Smartphone; zusammenführen
Kompakte Sticky-Leiste
Lange Seiten
Verdeckte Ankerziele und Inhalte
Header-Galerien zeigen meist Bilder. Das hier sind funktionierende Header in reinem HTML und CSS mit erfundenen Marken. Du kannst den Rahmen in der Größe ändern, den Code anpassen und die Version kopieren, die zu deiner Website passt.
Filtere die Beispiele nach Layout oder scrolle durch alle zehn.
Bearbeite den Code in einem beliebigen Beispiel; der abgeschottete Rahmen zeichnet sich beim Tippen neu.
Kopiere HTML und CSS und setze dein Logo, deine Links und deinen Schaltflächentext ein.
Geh vor dem Veröffentlichen die Checkliste am Ende durch.
Umschließe die Links mit einem nav-Element mit aria-label und kennzeichne die aktuelle Seite mit aria-current="page".
Das header-Element zählt nur dann als Banner-Landmark der Seite, wenn es nicht in article, aside, main, nav oder section liegt.
Sticky Header brauchen einen top-Wert wie top: 0, sonst verhält sich position: sticky wie relative.
Gib Überschriften scroll-margin-top, wenn der Header sticky ist, damit Sprunglinks die Überschrift nicht unter der Leiste verstecken.
Halte jede Tippfläche mindestens 24 mal 24 CSS-Pixel groß, um die Zielgröße nach WCAG 2.2 auf Stufe AA zu erfüllen; 44 Pixel sind angenehmer.
Häufige Fragen
Was gehört in einen Website-Header?
Das Logo mit Link zur Startseite, die Hauptnavigation und bei den meisten Unternehmenswebsites eine primäre Schaltfläche wie Buchen oder Angebot anfordern. Lokale Unternehmen ergänzen oft eine Telefonnummer. Lass alles weg, was Besucher nicht auf jeder Seite brauchen.
Wie hoch sollte ein Website-Header sein?
Eine feste Regel gibt es nicht. Etwa 56 bis 80 Pixel sind für eine einzelne Leiste auf dem Desktop üblich, auf Smartphones schmaler. Ein Sticky Header sollte so niedrig wie möglich sein, weil er die ganze Zeit Inhalt verdeckt.
Kann ich ein Mobile-Menü ohne JavaScript bauen?
Ja. Ein details-Element mit einem summary als Menü-Schaltfläche öffnet und schließt die Links nativ und funktioniert mit der Tastatur. Beispiel 6 auf dieser Seite nutzt diesen Ansatz. Eine JavaScript-Schaltfläche mit aria-expanded gibt dir mehr Kontrolle über Animation und Schließen.
Sollte der Header sticky sein?
Auf langen Seiten, auf denen Besucher oft das Menü oder den CTA brauchen, hilft ein kompakter Sticky Header. Auf kurzen Seiten nimmt er vor allem Platz weg. Wenn du einen nutzt, halte ihn schmal und prüfe, dass Links innerhalb der Seite unterhalb davon landen.
Platzierung von Logo, Navigation und CTA
Besucher suchen das Logo oben links und erwarten, dass es sie zur Startseite bringt. Halte dich an diese Konvention, es sei denn, deine Marke hat einen guten Grund, es zu zentrieren. Setze die Aktionsschaltfläche ganz nach rechts, wo der Blick beim Überfliegen der Leiste endet.
Ordne die Links danach, was Besucher am meisten brauchen, nicht nach deinem Organigramm. Leistungen und Preise stehen meist vor Über uns.
Header auf Smartphones
Unter etwa 768 Pixeln passen die meisten Linkreihen nicht mehr. Klappe sie hinter einer klar beschrifteten Menü-Schaltfläche zusammen und lass den Haupt-CTA daneben sichtbar, denn er ist der eine Link, der seinen Platz verdient.
Teste bei 375 Pixeln Breite. Wenn etwas seitlich scrollt, kürze die Beschriftungen oder klappe früher zusammen.
Checkliste für den Website-Header
Prüfe das vor dem Veröffentlichen
Prüfung
Warum
Logo verlinkt zur Startseite
Das am meisten erwartete Verhalten eines Headers
Links liegen in einem beschrifteten nav
Screenreader führen es als Navigation auf
Aktuelle Seite mit aria-current gekennzeichnet
Sagt an, wo sich der Besucher befindet
Eine primäre Schaltfläche, anders gestaltet
Macht die Hauptaktion offensichtlich
Menü-Schaltfläche hat eine sichtbare Textbeschriftung
Ein Symbol allein wird leicht übersehen
Sichtbare Fokuskontur an jedem Link
Tastaturnutzer sehen, wo sie sind
Kein seitliches Scrollen bei 375 px
Auf Smartphones gehen Header zuerst kaputt
Sticky-Leisten verdecken keine Sprunglink-Ziele
Mit scroll-margin-top beheben
1. Klassisch: Logo links, Links und Schaltfläche rechts
Das Standardlayout für Unternehmen. Die Schaltfläche ist das letzte Element und damit der Endpunkt des Blicks.
2. Drei Zonen: Logo, zentrierte Links, CTA
Häufig auf Software-Websites. Ein Grid hält die Links unabhängig von der Logobreite wirklich mittig.
3. Zentriertes Logo mit Links darunter
Passt zu Shops und Restaurants, bei denen der Markenname im Mittelpunkt steht. Auf schmalen Bildschirmen brechen die Links in eine zweite Zeile um.
4. Service-Leiste mit Telefonnummer über der Hauptleiste
Für lokale Unternehmen, die auf Anrufe setzen: Die Nummer ist ein echter tel:-Link, damit Smartphones sie wählen können.
5. Kompakter Sticky Header
Scrolle innerhalb des Rahmens. position: sticky mit top: 0 hält die Leiste im Blick; der durchscheinende Hintergrund bleibt über dem Inhalt lesbar.
6. Mobile-Menü mit details und summary, ohne JavaScript
Das summary ist die Menü-Schaltfläche; der Browser übernimmt Öffnen, Schließen und Tastatur. Breite Bildschirme zeigen die Links in einer Zeile.
7. Dunkler Header mit Suche
Das Suchfeld hat eine visuell verborgene Beschriftung, damit Screenreader es trotzdem ansagen.
8. Transparenter Header über einem Hero
Der Header liegt auf der Hero-Farbe. Halte den Textkontrast gegenüber dem Hintergrund bei 4.5:1 oder mehr.
9. Shop-Header mit Ankündigungsleiste
Eine kurze Ankündigungszeile über der Leiste trägt ein Angebot; die Anzahl im Warenkorb steht im Linktext, damit sie vorgelesen wird.
10. Mobile-Header, der den CTA sichtbar hält
Auf Smartphones klappen die Links weg, aber die Buchungsschaltfläche bleibt neben dem Menü, weil sie die entscheidende Aktion ist.