Floating & Fullscreen
Switch between a centered rounded header and a full-width edge-to-edge layout with a single prop.
SofiDevA responsive, typed header component for Astro projects. Floating and fullscreen layouts, multi-level dropdowns, dark-mode support — all with inline SVG icons and no CDN required.
Switch between a centered rounded header and a full-width edge-to-edge layout with a single prop.
Detects the .dark class on <html> automatically, or force a theme with preset.
Supports top-level, secondary, and tertiary menu items — both on desktop hover and mobile accordion.
Arrow icons are inline SVG — no CDN script, no extra network request, no flash of unstyled icons.
All props and config objects are fully typed. Import types directly for IntelliSense and compile-time safety.
Add any content (buttons, search, badges) to the actions slot — shown in both header and mobile panel.
npm i @sofidevo/astro-dynamic-header