Classic Header

The standard header with sticky behaviour (position: sticky). Navigation on the left, actions slot on the right. ThemeToggle and LanguageSwitch appear automatically as the fallback content of the actions slot.

Slot system

Every header in the variant family exports a named actions slot. When no slot content is provided, ThemeToggle + LanguageSwitch are rendered as fallback — fully backward compatible with existing instances.

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

<!-- Custom action bar -->
<Header siteName="..." navItems={navItems} currentLang="en" pathname="/en/">
  <fragment slot="actions">
    <MyAuthButton />
  </fragment>
</Header>

Characteristics

position: sticky — stays at the top of the viewport
Mobile hamburger menu with accessible ARIA attributes
Scoped JS — works even with multiple headers on the same page
data-testid="header-classic" for E2E tests