A navigation bar component that provides a responsive and accessible way to organize links and dropdown menus. It is ideal for website headers, offering a collection of links that can either navigate directly or trigger dropdown content panels. The component automatically handles dropdown positioning, transitions, and keyboard navigation. Interactivity is managed by Alpine.js.

Basic Navigation Menu

This example demonstrates a standard navigation menu. It includes items that trigger dropdown content panels with various layouts, as well as simple navigation links.

Source

                        <RzNavigationMenu>
                            <NavigationMenuList>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>Home</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <div class="w-[400px] gap-3 p-4">
                                            <h3 class="mb-2 text-lg font-semibold">Welcome to RizzyUI</h3>
                                            <p class="text-sm text-muted-foreground">
                                                Build beautiful ASP.NET Core applications with our comprehensive component library.
                                            </p>
                                        </div>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>Components</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                                            @foreach (var component in _components)
                                            {
                                                @ListItem(component.Title, component.Href,
                                                    @<text>@component.Description</text>
                                                )
                                            }
                                        </ul>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuLink AsChild Href="/docs">
                                        <RzLink Color="SemanticColor.Foreground" Underline="false" class="@((string)Theme.NavigationMenuTrigger.Base!)">
                                            Docs
                                        </RzLink>
                                    </NavigationMenuLink>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>List</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                                            <li class="row-span-3">
                                                <NavigationMenuLink>
                                                    <RzLink class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
                                                        <img src="/images/rizzy-logo-wb.svg" class="h-12 w-12" alt="RizzyUI Logo" />
                                                        <div class="mt-4 mb-2 text-lg font-medium">
                                                            RizzyUI
                                                        </div>
                                                        <p class="text-sm leading-tight text-muted-foreground">
                                                            Beautifully designed components built with Blazor and Tailwind CSS.
                                                        </p>
                                                    </RzLink>
                                                </NavigationMenuLink>
                                            </li>
                                            @ListItem("Introduction", "/docs",
                                                @<text>Re-usable components built for modern ASP.NET Core applications.</text>
                                            )
                                            @ListItem("Installation", "/docs/installation",
                                                @<text>How to install dependencies and structure your app.</text>
                                            )
                                            @ListItem("Typography", "/docs/primitives/typography",
                                                @<text>Styles for headings, paragraphs, lists...etc</text>
                                            )
                                        </ul>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <div class="grid gap-3 p-6 w-[300px]">
                                            <p class="text-sm font-medium">A Simple Menu</p>
                                            <p class="text-sm text-muted-foreground">
                                                This demonstrates a simple dropdown with basic content.
                                            </p>
                                        </div>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <ul class="grid gap-3 p-6 w-[400px]">
                                            @IconListItem(MdiIcon.Package, "Package",
                                                @<text>Manage your package dependencies and configurations.</text>
                                            )
                                            @IconListItem(MdiIcon.AccountCircle, "Account",
                                                @<text>View and edit your account settings and preferences.</text>
                                            )
                                            @IconListItem(MdiIcon.Cog, "Settings",
                                                @<text>Configure your application settings and options.</text>
                                            )
                                        </ul>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                            </NavigationMenuList>
                        </RzNavigationMenu>


@code {
    private readonly (string Title, string Href, string Description)[] _components = 
    {
        ("Alert", "/components/alert", "A modal dialog that interrupts the user with important content."),
        ("Accordion", "/components/accordion", "A vertically stacked set of interactive headings that each reveal a section of content."),
        ("Badge", "/components/badge", "Displays a badge or a component that looks like a badge."),
        ("Button", "/components/buttons", "An interactive element that executes a command or navigates."),
        ("Card", "/components/card", "A container for content and actions about a single subject."),
        ("Dropdown Menu", "/components/dropdown", "Displays a menu to the user — such as a set of actions or functions — triggered by a button.")
    };

    private RenderFragment ListItem(string title, string href, RenderFragment childContent) => @<li>
        <NavigationMenuLink>
            <RzLink Href="@href" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                <div class="text-sm font-medium leading-none">@title</div>
                <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                    @childContent
                </p>
            </RzLink>
        </NavigationMenuLink>
    </li>;
    
    private RenderFragment IconListItem(SvgIcon icon, string title, RenderFragment childContent) => @<li>
        <NavigationMenuLink>
            <RzLink Href="#" class="flex items-start space-x-3 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                <span class="size-5 text-2xl mt-px text-muted-foreground" aria-hidden="true">
                    <Blazicon Svg="@icon"/>
                </span>
                <div class="space-y-1">
                    <div class="text-sm font-medium leading-none">@title</div>
                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        @childContent
                    </p>
                </div>
            </RzLink>
        </NavigationMenuLink>
    </li>;
}

Accessibility

Pattern: RzNavigationMenu implements a disclosure/popover-style site navigation pattern (not an application role="menu" pattern). Top-level triggers control associated popover content panels while preserving normal page tab order.

Semantics: the root renders as <nav> with an accessible name via aria-label. Triggers expose aria-expanded and aria-controls bound to panel IDs.
Keyboard: triggers are buttons, so Enter/Space activate by default. ArrowLeft/ArrowRight move between top-level triggers and links, and ArrowDown moves into associated content when content exists.
Focus behavior: focus is never trapped. ArrowDown focuses the first focusable descendant in the active content, or the content container when no focusable descendant exists. When Escape closes an open panel while focus is inside that panel, focus is restored to the controlling trigger.
Screen readers: expanded/collapsed state is announced through aria-expanded, and control relationships are announced through aria-controls.
SSR/CSP: all behavior is SSR-rendered HTML plus Alpine runtime hooks; no Blazor interactive event callbacks are required.
Current-link guidance: set aria-current="page" on the active NavigationMenuLink target to expose the current page to assistive technologies.
Known limitations: this component does not implement full APG menubar arrow-key roving focus semantics and intentionally avoids role="menu"/role="menuitem". ArrowUp, Home, and End are not special navigation keys for this disclosure pattern.

Key	When focus is on	Behavior
`Enter` / `Space`	Top-level `NavigationMenuTrigger`	Activates the trigger button and toggles its associated content panel.
`ArrowLeft`	Top-level `NavigationMenuTrigger` or top-level `NavigationMenuLink`	Moves focus to the previous top-level trigger/link; wraps to the last top-level item from the first.
`ArrowRight`	Top-level `NavigationMenuTrigger` or top-level `NavigationMenuLink`	Moves focus to the next top-level trigger/link; wraps to the first top-level item from the last.
`ArrowDown`	Top-level trigger/link with associated content	Opens the associated content if needed and moves focus into it. The first focusable descendant is focused when present; otherwise the content container receives focus.
`ArrowDown`	Top-level link without associated content	No special action; focus remains unchanged.
`Escape`	Open navigation content	Closes the active panel and restores focus to the controlling trigger when focus was inside panel content.
`Tab` / `Shift`+`Tab`	Any focusable element	Uses normal document tab order; focus is not trapped within the navigation menu.

Component Parameters

The following tables summarize the parameters for the `RzNavigationMenu` and its child components.

RzNavigationMenu

Property	Description	Type	Default
`ChildContent`	The content of the navigation menu, typically a `NavigationMenuList`.	`RenderFragment?`	`null`
`Orientation`	Specifies the orientation of the menu. Currently, only `Horizontal` is fully supported.	`Orientation`	`Orientation.Horizontal`
`AriaLabel`	Accessible name for the navigation menu. Defaults to a localized "Main Navigation".	`string?`	`null`

NavigationMenuTrigger

Property	Description	Type	Default
`ChildContent`	The content of the trigger, typically text.	`RenderFragment?`	`null`

NavigationMenuLink

Property	Description	Type	Default
`ChildContent`	The content of the link, typically an <RzLink> or <a> tag.	`RenderFragment?`	`null`

The components `NavigationMenuList`, `NavigationMenuItem`, and `NavigationMenuContent` primarily accept `ChildContent` and pass through additional HTML attributes. They have no other unique parameters.

Alpine API

This page uses the rzNavigationMenu Alpine x-data component.

Method	Parameters	Description
`openMenu`	`id: string`	Opens the navigation menu item by id.
`closeMenu`	`—`	Closes the active menu item.