Hybrid Astro UI

NavigationMenu

Open in ChatGPT

A responsive Mega Menu component using Tailwind CSS and the native <details> element, ideal for structuring complex, multi-column navigation with descriptions and direct links.

Install

pnpm dlx hybrid-astro-ui@latest add navigation-menu
npx hybrid-astro-ui@latest add navigation-menu
yarn dlx hybrid-astro-ui@latest add navigation-menu
bunx hybrid-astro-ui@latest add navigation-menu

Usage

---
import { 
    NavigationMenu, 
    NavigationMenuTrigger, 
    NavigationMenuContent, 
    NavigationMenuItem 
} from "@/src/components/hybrid-astro-ui/navigation-menu"

---
<NavigationMenu>

    <NavigationMenuItem>
        <NavigationMenuTrigger>
            Products & Solutions
        </NavigationMenuTrigger>
        <NavigationMenuContent>
            <div>
                <a href="#">Core Platform</a>
                <p class="opacity-55 text-[0.8rem]">
                    The foundation of our service, offering robust 
                    and scalable infrastructure.
                </p>
            </div>
            <div>
                <a href="#">Integrations & API</a>
                <p class="opacity-55 text-[0.8rem]">
                    Seamlessly connect with your existing 
                    tools using our flexible API.
                </p>
            </div>
            <div>
                <a href="#">Advanced Analytics</a>
                <p class="opacity-55 text-[0.8rem]">
                    Gain deep insights into your data with 
                    our powerful reporting tools.
                </p>
            </div>
        </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
        <NavigationMenuTrigger>
            Docs
        </NavigationMenuTrigger>
        <NavigationMenuContent class="grid-cols-2">
            <div>
                <a href="#">Getting Started</a>
                <p class="opacity-55 text-[0.8rem]">
                    Quick guides to set up your account and 
                    start using our main features.
                </p>
            </div>
            <div>
                <a href="#">Installation Guide</a>
                <p class="opacity-55 text-[0.8rem]">
                    Detailed steps for installing the required 
                    libraries and dependencies.
                </p>
            </div>
            <div>
                <a href="#">API Reference</a>
                <p class="opacity-55 text-[0.8rem]">
                    Comprehensive list of endpoints, parameters,
                     and response structures.
                </p>
            </div>
        </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
        <NavigationMenuTrigger disableTrigger>
            <a href="/pricing" class="navigation-link-style">Pricing</a>
        </NavigationMenuTrigger>
    </NavigationMenuItem>

</NavigationMenu>

Controlling the Layout (Columns)

To change the layout within the dropdown panel, you can pass Grid classes to <NavigationMenuContent>:

Class on NavigationMenuContentResult
class="grid-cols-2"Two columns (Example “Docs” in the Preview).
class="grid-cols-3"Three columns for more compact items.

To create a simple link (e.g., “Pricing” or “Contact”) that does not open a dropdown menu, you must use the disableTrigger prop on <NavigationMenuTrigger> and nest the <a> directly inside.

PropTypeDescription
disableTriggerbooleanDisables the open/close logic, allowing the child element (<a>) to act as a normal navigation link.

Direct Link Code:

<NavigationMenuItem>
    <NavigationMenuTrigger disableTrigger>
        <a href="/pricing" class="navigation-link-style">Pricing</a>
    </NavigationMenuTrigger>
</NavigationMenuItem>