Blazor Blueprint Blazor Blueprint
Previous Menubar Next Pivot

Navigation Menu

A headless navigation menu primitive providing the behavioral foundation for horizontal site navigation bars with dropdown content panels. Manages open/close state, hover-triggered dropdowns with close timers, route-change auto-close, and ARIA attributes — without any default styling.

Unstyled Navigation Menu

A basic headless navigation menu. This primitive provides all the behavior (hover open/close with 150ms timer, route-change auto-close, ARIA) without any styling — you bring your own CSS. Use the styled BbNavigationMenu component from the Components library for pre-built Tailwind styles.
@using BlazorBlueprint.Primitives.NavigationMenu

<BbNavigationMenu>
    <BbNavigationMenuList>
        <BbNavigationMenuItem Value="products">
            <BbNavigationMenuTrigger>Products</BbNavigationMenuTrigger>
            <BbNavigationMenuContent>
                <BbNavigationMenuLink Href="/products/widgets">Widgets</BbNavigationMenuLink>
                <BbNavigationMenuLink Href="/products/gadgets">Gadgets</BbNavigationMenuLink>
            </BbNavigationMenuContent>
        </BbNavigationMenuItem>
        <BbNavigationMenuItem>
            <BbNavigationMenuLink Href="/about">About</BbNavigationMenuLink>
        </BbNavigationMenuItem>
    </BbNavigationMenuList>
</BbNavigationMenu>

Anatomy

<BbNavigationMenu>
    <BbNavigationMenuList>
        <BbNavigationMenuItem>
            <BbNavigationMenuTrigger />
            <BbNavigationMenuContent />
        </BbNavigationMenuItem>
        <BbNavigationMenuItem>
            <BbNavigationMenuLink />
        </BbNavigationMenuItem>
    </BbNavigationMenuList>
</BbNavigationMenu>
View source on GitHub
Previous Menubar Next Pivot