Navigation Menu

<NaviusNavigationMenu @bind-Value="_open"
                      class="relative flex justify-center">
    <NaviusNavigationMenuList class="flex list-none items-center gap-1">
        <NaviusNavigationMenuItem Value="getting-started">
            <NaviusNavigationMenuTrigger
                class="group ... data-[popup-open]:bg-accent">
                Getting started
                <svg class="group-data-[popup-open]:rotate-180">…</svg>
            </NaviusNavigationMenuTrigger>
            <NaviusNavigationMenuPortal>
                <NaviusNavigationMenuPositioner>
                    <NaviusNavigationMenuPopup
                        class="... bg-popover text-popover-foreground shadow-md">
                        <NaviusNavigationMenuContent>
                            <NaviusNavigationMenuLink Href="#">Introduction</NaviusNavigationMenuLink>
                            <NaviusNavigationMenuLink Href="#">Installation</NaviusNavigationMenuLink>
                        </NaviusNavigationMenuContent>
                    </NaviusNavigationMenuPopup>
                </NaviusNavigationMenuPositioner>
            </NaviusNavigationMenuPortal>
        </NaviusNavigationMenuItem>

        <NaviusNavigationMenuItem Value="documentation">
            <NaviusNavigationMenuLink Href="#">Documentation</NaviusNavigationMenuLink>
        </NaviusNavigationMenuItem>
    </NaviusNavigationMenuList>
</NaviusNavigationMenu>

@code { private string? _open; }

Features

• Can be controlled (@bind-Value) or uncontrolled (DefaultValue).
• Full keyboard navigation with arrow-key roving across the trigger row.
• Hover opens after OpenDelay; sweeping across triggers switches instantly while open.
• Supports horizontal and vertical orientation, plus nested Sub menus.
• Optional resizing Viewport and an Arrow that the positioner keeps pointed at the active trigger.
• Renders as a <nav> landmark: site navigation, not a menu widget.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add navigation-menu

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.NavigationMenu

<NaviusNavigationMenu>
    <NaviusNavigationMenuList>
        <NaviusNavigationMenuItem Value="item-1">
            <NaviusNavigationMenuTrigger />
            <NaviusNavigationMenuPortal>
                <NaviusNavigationMenuPositioner>
                    <NaviusNavigationMenuPopup>
                        <NaviusNavigationMenuArrow />
                        <NaviusNavigationMenuContent>
                            <NaviusNavigationMenuLink Href="#" />

                            @* Optional nested submenu. *@
                            <NaviusNavigationMenuSub>
                                <NaviusNavigationMenuList>
                                    <NaviusNavigationMenuItem Value="sub-1">
                                        <NaviusNavigationMenuTrigger />
                                        <NaviusNavigationMenuContent />
                                    </NaviusNavigationMenuItem>
                                </NaviusNavigationMenuList>
                            </NaviusNavigationMenuSub>
                        </NaviusNavigationMenuContent>
                    </NaviusNavigationMenuPopup>
                </NaviusNavigationMenuPositioner>
            </NaviusNavigationMenuPortal>
        </NaviusNavigationMenuItem>

        <NaviusNavigationMenuItem Value="item-2">
            <NaviusNavigationMenuLink Href="#" />
        </NaviusNavigationMenuItem>
    </NaviusNavigationMenuList>

    @* Optional shared resizing container. *@
    <NaviusNavigationMenuViewport />
</NaviusNavigationMenu>

API Reference

Root

Contains all the parts of a navigation menu and owns the open value. Renders a nav.

Data attributes

List

The top-level list of items, aligned along the edge of the active content. Renders a ul.

Data attributes

Item

A single list item holding either a Trigger + Content pair or a top-level Link. Renders an li.

Data attributes

Trigger

The button that discloses its item's content. Renders a button.

Data attributes

Content

The panel disclosed by a trigger. Self-anchors as a popover, or teleports into a Viewport when one is present. Renders a div.

Data attributes

Link

A navigational anchor, used as a top-level item or inside a Content panel. Renders an a.

Data attributes

Arrow

A marker inside the Popup that the positioner keeps pointed at the active trigger. Replaces the former Indicator; no state tracking is needed. Renders an svg.

Data attributes

Viewport

The shared resizing container that hosts the active panel. Place it outside the List; open Content teleports into it. Renders a div.

Data attributes

While open, the engine writes --navius-navigation-menu-viewport-width and --navius-navigation-menu-viewport-height (px) on the element so the container can animate to the active panel's size.

Sub

A nested submenu root, placed inside a Content panel. Owns its own open value and orientation. Renders a div.

Data attributes

Accessibility

Built as site navigation: the root is a <nav> landmark and the trigger row behaves as a single composite Tab stop with arrow-key roving, following the disclosure WAI-ARIA design pattern.

Keyboard interactions