Menu

<NaviusMenu>
    <NaviusMenuTrigger class="... data-[popup-open]:bg-accent">
        Options
    </NaviusMenuTrigger>

    <NaviusMenuPositioner Side="bottom" Align="start" SideOffset="6">
        <NaviusMenuPopup class="... bg-popover text-popover-foreground shadow-md
                data-[open]:animate-in data-[closed]:animate-out">
            <NaviusMenuGroupLabel class="...">My Account</NaviusMenuGroupLabel>

            <NaviusMenuItem class="... data-[highlighted]:bg-accent">
                New Tab <span class="...">&#8984;T</span>
            </NaviusMenuItem>
            <NaviusMenuItem class="...">New Window</NaviusMenuItem>

            <NaviusMenuSub>
                <NaviusMenuSubTrigger class="... data-[popup-open]:bg-accent">
                    More Tools
                </NaviusMenuSubTrigger>
                <NaviusMenuSubContent class="...">
                    <NaviusMenuItem>Save Page As&#8230;</NaviusMenuItem>
                    <NaviusMenuItem>Developer Tools</NaviusMenuItem>
                </NaviusMenuSubContent>
            </NaviusMenuSub>

            <NaviusMenuSeparator class="-mx-1 my-1 h-px bg-border" />

            <NaviusMenuCheckboxItem @bind-Checked="_showBookmarks" class="...">
                <NaviusMenuItemIndicator>&#10003;</NaviusMenuItemIndicator>
                Show Bookmarks
            </NaviusMenuCheckboxItem>

            <NaviusMenuSeparator class="-mx-1 my-1 h-px bg-border" />

            <NaviusMenuRadioGroup @bind-Value="_person">
                <NaviusMenuRadioItem Value="pedro" class="...">
                    <NaviusMenuItemIndicator>&#8226;</NaviusMenuItemIndicator>
                    Pedro Duarte
                </NaviusMenuRadioItem>
                <NaviusMenuRadioItem Value="colm" class="...">
                    <NaviusMenuItemIndicator>&#8226;</NaviusMenuItemIndicator>
                    Colm Tuite
                </NaviusMenuRadioItem>
            </NaviusMenuRadioGroup>

            <NaviusMenuArrow class="fill-popover" />
        </NaviusMenuPopup>
    </NaviusMenuPositioner>
</NaviusMenu>

@code {
    private bool? _showBookmarks = true;
    private string? _person = "pedro";
}

Features

• Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
• Supports submenus with their own independent open state.
• Supports items, group labels, separators, checkbox items and radio groups.
• Full keyboard navigation with roving focus and typeahead.
• Focus is fully managed: opening focuses the first item, closing returns focus to the trigger.
• Dismisses on Escape, outside pointer-down, and selecting an item (cancelable via OnSelect).
• The engine self-portals the Popup to document.body to escape clipping and stacking ancestors.
• Direction-aware: flips submenu open/close arrow keys in RTL.

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

navius add dropdown-menu

Anatomy

Import the parts and assemble them. The Positioner and Popup replace the former Content; the Popup self-portals.

@using Navius.Primitives.Components.Menu

<NaviusMenu>
    <NaviusMenuTrigger />

    <NaviusMenuPositioner>
        <NaviusMenuPopup>
            <NaviusMenuGroupLabel />
            <NaviusMenuItem />

            <NaviusMenuGroup>
                <NaviusMenuGroupLabel />
                <NaviusMenuItem />
            </NaviusMenuGroup>

            <NaviusMenuCheckboxItem>
                <NaviusMenuItemIndicator />
            </NaviusMenuCheckboxItem>

            <NaviusMenuRadioGroup>
                <NaviusMenuRadioItem>
                    <NaviusMenuItemIndicator />
                </NaviusMenuRadioItem>
            </NaviusMenuRadioGroup>

            <NaviusMenuSeparator />

            <NaviusMenuSub>
                <NaviusMenuSubTrigger />
                <NaviusMenuSubContent>
                    <NaviusMenuItem />
                </NaviusMenuSubContent>
            </NaviusMenuSub>

            <NaviusMenuArrow />
        </NaviusMenuPopup>
    </NaviusMenuPositioner>
</NaviusMenu>

API Reference

Root

Contains all the parts of a menu. Owns the open state and renders no DOM of its own.

Trigger

The button that toggles the menu. By default it has aria-haspopup, aria-expanded and aria-controls wired to the popup. Renders a button.

Data attributes

Positioner

Owns placement (side / align / offsets / collision). A flag-setter that publishes the placement options; the Popup renders the positioning element the engine anchors to the trigger and writes data-side / data-align + --anchor-* onto.

Popup

The menu surface, self-portaled and anchored to the trigger. Mounted while open (kept mounted through its exit transition). Renders a div with role=menu.

Data attributes

Arrow

An optional arrow that the positioner keeps pointed at the trigger. Renders an svg.

Item

A selectable menu item. Activates on click or Enter/Space, then closes the menu unless OnSelect prevents it. Renders a div with role=menuitem.

Data attributes

Group

A wrapper that groups related items and is labelled by a GroupLabel child. Renders a div with role=group.

GroupLabel

A non-interactive heading. When nested in a Group it labels that group via aria-labelledby. Renders a div.

CheckboxItem

An item that can be checked, unchecked or indeterminate. Cascades a state context the ItemIndicator reads. Renders a div with role=menuitemcheckbox.

Data attributes

RadioGroup

Groups RadioItems and cascades the selected value. Renders a div with role=group.

RadioItem

An item inside a RadioGroup; checked when the group's value equals its Value. Cascades a state context the ItemIndicator reads. Renders a div with role=menuitemradio.

Data attributes

ItemIndicator

Renders the check or dot glyph for a CheckboxItem or RadioItem. Present only when the parent is checked (or indeterminate). Renders a span.

Separator

A visual divider between items or groups. Renders a div with role=separator.

Sub

Contains the parts of a submenu. Owns its own nested open state and renders no DOM of its own.

SubTrigger

An item inside the parent menu that opens a submenu on hover, ArrowRight (ArrowLeft in RTL) and Enter/Space. Anchors the submenu. Renders a div with role=menuitem.

Data attributes

SubContent

The floating submenu surface, self-portaled and positioned to the side of the SubTrigger. ArrowLeft (ArrowRight in RTL) and Escape close only this submenu. Renders a div with role=menu.

Data attributes

Accessibility

Implements the roles, states, and keyboard map of the menu button WAI-ARIA APG pattern. Behavior is covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions