Classic Header

Der Standard-Header mit klebrigem Verhalten (position: sticky). Navigation links, Aktions-Slot rechts. ThemeToggle und LanguageSwitch erscheinen automatisch als Fallback-Inhalt des actions-Slots.

Slot-System

Jeder Header in der Varianten-Familie exportiert einen benannten Slot actions. Wenn kein Slot-Inhalt übergeben wird, werden ThemeToggle + LanguageSwitch als Fallback gerendert — vollständig rückwärtskompatibel mit bestehenden Instanzen.

<!-- Fallback: ThemeToggle + LanguageSwitch -->
<Header siteName="..." navItems={navItems} currentLang="de" pathname="/"
        alternateHref="/en/" />

<!-- Individuell: eigene Aktionsleiste -->
<Header siteName="..." navItems={navItems} currentLang="de" pathname="/">
  <fragment slot="actions">
    <MyAuthButton />
  </fragment>
</Header>

Eigenschaften

position: sticky — Klebt am oberen Rand des Viewports
Mobile Hamburger-Menü mit zugänglichen ARIA-Attributen
Scoped JS — funktioniert auch bei mehreren Headern auf einer Seite
data-testid="header-classic" für E2E-Tests