Navigation Menu

Overview

NavigationMenu renders NaviusNavigationMenu as a relative, centered root that hosts the List plus, by default, a shared resizing Viewport nested inside the primitive’s Portal > Positioner > Popup surface. Open Content panels teleport into that one animated container beneath the active trigger; the wrapper reproduces the directional enter motion off the primitive’s data-activation-direction.

Install

navius add navigation-menu --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsNavigationMenu>
    <ZitsNavigationMenuList>
        <ZitsNavigationMenuItem Value="docs">
            <ZitsNavigationMenuTrigger>Docs</ZitsNavigationMenuTrigger>
            <ZitsNavigationMenuContent>
                <ZitsNavigationMenuLink Href="/docs/introduction">Introduction</ZitsNavigationMenuLink>
            </ZitsNavigationMenuContent>
        </ZitsNavigationMenuItem>
    </ZitsNavigationMenuList>
</ZitsNavigationMenu>

Parts and props

Value/ValueChanged/DefaultValue, Orientation, Delay, CloseDelay, OnOpenChangeComplete, Href/Active/OnSelect (Link), Disabled (Trigger/Item), ForceMount (Content/Viewport), and Side/Align/SideOffset (Positioner) are the primitive’s own props and pass through unchanged. The styled root adds:

Prop	Type	Default	Description
Viewport	bool	true	Renders the shared NaviusNavigationMenuPortal > ZitsNavigationMenuPositioner > ZitsNavigationMenuPopup (with ZitsNavigationMenuArrow + ZitsNavigationMenuViewport) automatically. Set false to compose that surface manually.

Styling surface

Every part accepts class/Attributes, merged with its own base class through Cn.Merge. ZitsNavigationMenuTrigger.TriggerStyle is a public const string also usable to style a top-level ZitsNavigationMenuLink identically to a trigger.

Data attribute hooks

Part	Attribute	Description
Trigger, Icon	data-popup-open	Present while the item’s panel is open, emitted by the composed primitive; rotates the chevron and drives the active-trigger background.
Content	data-activation-direction	left/right/up/down, emitted by the composed primitive; drives the directional slide-in animation.
Popup	data-open / data-closed	Emitted by the composed primitive; drives the fade/zoom enter-exit animation.
Popup, Arrow	data-side	Emitted by the composed primitive; drives the slide-in-from-edge animation and arrow offset.
Link	data-active	Emitted by the composed primitive; drives the active-page link styling.

Underlying primitives

• NaviusNavigationMenu