Navigation Menu Component

A collection of links for navigating websites. Supports dropdown panels with rich content.

Default

A basic navigation menu with dropdown items.

Simple Navigation

Navigation without dropdown panels.

Features

Dropdown panels with rich content on hover/click
Full keyboard navigation (ΓåÉ/ΓåÆ between items, Γåô to open, Esc to close)
ARIA menubar roles for accessibility
Flexible content - supports any layout in panels
Active link highlighting

Keyboard Navigation

ΓåÉ/ΓåÆ Navigate between menu items

Γåô Open dropdown panel

Enter/Space Toggle dropdown

Escape Close dropdown

Installation

@using BlazorUI.Components.NavigationMenu

Usage

<NavigationMenu>
    <NavigationMenuList>
        <NavigationMenuItem Value="products">
            <NavigationMenuTrigger>Products</NavigationMenuTrigger>
            <NavigationMenuContent>
                <ul class="grid gap-3 p-4 w-[400px]">
                    <li>
                        <NavigationMenuLink Href="/products">
                            All Products
                        </NavigationMenuLink>
                    </li>
                </ul>
            </NavigationMenuContent>
        </NavigationMenuItem>
    </NavigationMenuList>
</NavigationMenu>