Header Variants
Four structural header variants built on the actions slot. Each variant supports the same props set and gives instances full control over the action bar — from ThemeToggle and LanguageSwitch to auth buttons or any Astro component.
Four structural header variants built on the actions slot. Each variant supports the same props set and gives instances full control over the action bar — from ThemeToggle and LanguageSwitch to auth buttons or any Astro component.
classic
The standard header with sticky behaviour. Navigation on the left, actions on the right. The slot system allows a custom action bar.
Note: Fallback: ThemeToggle + LanguageSwitch
View demo →centered
Brand name centered, navigation links split left and right. Ideal for symmetrical layouts.
Note: Same props and slot as Classic
View demo →hide-on-scroll
Header slides off screen when scrolling down and reappears when scrolling up. Uses position: fixed with body padding compensation.
Note: Scroll direction + requestAnimationFrame
View demo →flyout
Nav items with children[] show a dropdown panel on hover (desktop) and click (mobile). Fully keyboard accessible.
Note: aria-expanded, aria-haspopup, Esc to close
View demo →