Sticky Header Component for Astro With Mega Menu

A clean, responsive, and configurable <Navigation /> component for your existing Astro projects with mega menu support. Easily integrate it into your codebase by copy-pasting the component, or bootstrap a new Astro project with the help of this codebase with the <Navigation /> component already integrated. This component includes the following:

• Configurable: Pass your menu items to the <Navigation /> component to generate your menus. The component can be used as-is, with easy configuration through props:

// Import the component at the top of your file
import Navigation from '@components/Navigation.astro'

// Call the component with the following props
<Navigation
    logo="path/to/logo.png"
    items={[{
        // Using regular links
        title: 'Posts',
        link: '/posts'
    }, {
        // Using mega menu
        title: 'Item with Mega Menu',
        subTitle: 'Mega Menu Title',
        ctaLabel: 'Vew all ->',
        ctaLink: '/products'
        items: [{
            icon: 'search',
            title: 'Search',
            description: 'Set your descriptions',
            link: '/search'
        }]
    }, { ... }]}
/>

• Easy to style: Styles can also be configured via Sass variables through the stylesheet provided with the component. SVG icons are included.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops. The entire menu can be toggled via a hamburger menu on mobile, and mega menu elements are collapsible.
  • Light & dark themes: Inside the stylesheet, configurations for dark/light themes are also included.
• Cross-browser support: The component was tested on major browsers (Chrome, Firefox, Edge) to ensure cross-browser compatibility.
• No third-party dependency: The component is written in Astro without the use of extra libraries, making it performant and lightweight compared to other solutions. There are no dependencies on other third-party packages.