Components / Navigation Menu

Navigation Menu

A collection of links for navigating websites. Hover or focus a trigger to disclose its panel; arrow keys rove the trigger row and Esc closes. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

razor
<ZitsNavigationMenu>
    <ZitsNavigationMenuList>
        <ZitsNavigationMenuItem Value="docs">
            <ZitsNavigationMenuTrigger>Getting started</ZitsNavigationMenuTrigger>
            <ZitsNavigationMenuContent>
                <ul class="grid gap-3 p-4 md:w-[400px]">
                    <li>
                        <ZitsNavigationMenuLink Href="/docs" class="block rounded-md p-3 hover:bg-accent">
                            <div class="text-sm font-medium">Introduction</div>
                            <p class="text-sm text-muted-foreground">Re-usable components you copy into your app and own.</p>
                        </ZitsNavigationMenuLink>
                    </li>
                </ul>
            </ZitsNavigationMenuContent>
        </ZitsNavigationMenuItem>
        <ZitsNavigationMenuItem Value="home">
            <ZitsNavigationMenuLink Href="/" class="@ZitsNavigationMenuTrigger.TriggerStyle">Documentation</ZitsNavigationMenuLink>
        </ZitsNavigationMenuItem>
    </ZitsNavigationMenuList>
</ZitsNavigationMenu>

Installation

Terminal bash
navius add navigation-menu

API reference

Prop Type Default
Value string? -
DefaultValue string? -
Orientation string "horizontal"
Viewport bool true
Item.Value string ""
Trigger.Disabled bool false
Content.Side string "bottom"
Content.Align string "start"
Content.ForceMount bool false
Link.Href string? -
Link.Active bool false