Vier strukturelle Header-Varianten auf Basis des actions-Slots. Jede Variante unterstützt denselben Props-Satz und gibt Instanzen volle Kontrolle über die Aktionsleiste — von ThemeToggle und LanguageSwitch bis hin zu Auth-Schaltflächen oder beliebigen Astro-Komponenten.
classic
Der Standard-Header mit klebrigem Verhalten. Navigation links, Aktionen rechts. Slot-System ermöglicht individuelle Aktionsleiste.
Hinweis: Fallback: ThemeToggle + LanguageSwitch
Demo ansehen →centered
Logo/Markenname in der Mitte, Navigationslinks links und rechts aufgeteilt. Ideal für symmetrische Layouts.
Hinweis: Gleiche Props und Slot wie Classic
Demo ansehen →hide-on-scroll
Header blendet sich beim Scrollen nach unten aus und erscheint beim Hochscrollen wieder. Position: fixed mit Body-Padding-Ausgleich.
Hinweis: Scroll-Richtung + requestAnimationFrame
Demo ansehen →flyout
Nav-Links mit children[] zeigen ein Dropdown-Panel beim Hover (Desktop) und Klick (Mobil). Vollständig tastaturzugänglich.
Hinweis: aria-expanded, aria-haspopup, Esc zum Schließen
Demo ansehen →