@sofidevo/astro-dynamic-header

A dynamic, responsive header component for Astro projects that can switch between floating and fullscreen styles with multi-level dropdown navigation support.

Features

• 🎨 Dynamic Styles: Switch between floating and fullscreen header layouts
• 📱 Fully Responsive: Mobile-first design with hamburger menu
• 🎯 Multi-level Dropdowns: Support for nested navigation menus
• 🚀 TypeScript Support: Full type safety and IntelliSense
• 🎨 Customizable: Extensive customization options for colors, sizes, and behavior
• ⚡ Astro Optimized: Built specifically for Astro framework

Live demo

https://base-astro-psi.vercel.app/fullscreen-demo

Installation

 npm i @sofidevo/astro-dynamic-header

Quick Start

Basic Usage

---
import Header from '@sofidevo/astro-dynamic-header/Header.astro';

const menuItems = [
  { link: '/about', text: 'About' },
  { link: '/contact', text: 'Contact' },
];
---

<Header
  headerType="floating"
  logoSrc="/logo.png"
  menuItems={menuItems}
/>

Advanced Usage

---
import Header from '@sofidevo/astro-dynamic-header/Header.astro';

const menuItems = [
  {
    link: '#',
    text: 'Services',
    submenu: [
      {
        link: '#',
        text: 'Web Development',
        submenu: [
          { link: '/web/frontend', text: 'Frontend' },
          { link: '/web/backend', text: 'Backend' },
          { link: '/web/fullstack', text: 'Full Stack' },
        ],
      },
      { link: '/design', text: 'Design' },
      { link: '/consulting', text: 'Consulting' },
    ],
  },
  { link: '/about', text: 'About' },
  { link: '/contact', text: 'Contact' },
];
---

<Header
  headerType="fullscreen"
  logoSrc="/logo.png"
  logoAlt="My Company"
  logoWidth="150px"
  homeUrl="/"
  menuItems={menuItems}
  backgroundColor="#000000dd"
  backdropBlur="blur(15px)"
  zIndex={100}
/>

Component Props

Header Component

Menu Item Structure

interface MenuItemType {
  link: string;
  text: string;
  submenu?: MenuItemType[];
}

Header Types

Floating Header

• Centered with max-width constraint
• Rounded corners
• Padding around container
• Perfect for modern, card-like designs

Fullscreen Header

• Full viewport width
• No border radius
• Edge-to-edge design
• Ideal for traditional website layouts

Individual Components

You can also import and use components individually:

---
import NavMenu from '@sofidevo/astro-dynamic-header/NavMenu.astro';
import MobileNav from '@sofidevo/astro-dynamic-header/MobileNav.astro';
import HamburgerButton from '@sofidevo/astro-dynamic-header/HamburgerButton.astro';
---

<NavMenu menuItems={menuItems} showHomeLink={true} homeText="Home" />
<MobileNav menuItems={menuItems} accentColor="#00ffff" />
<HamburgerButton color="#ffffff" />

Styling and Customization

The component uses CSS custom properties that you can override:

:root {
  --light-spot-color: #00ffff;
  --color-tertiary: #ffffff;
  --color-hamburger-lines: #ffffff;
}

TypeScript Support

Full TypeScript support with exported interfaces:

import type {
  MenuItemType,
  HeaderProps,
  NavMenuProps,
  MobileNavProps,
  HamburgerButtonProps
} from '@sofidevo/astro-dynamic-header';

Browser Support

• All modern browsers
• Mobile responsive design
• Supports CSS backdrop-filter
• Graceful degradation for older browsers

Live Examples

Visit our demo website to see the component in action with interactive examples and complete documentation.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Support

If you find this package helpful, please consider giving it a ⭐ on GitHub!