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

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

navius add 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

Adheres to the menu button WAI-ARIA design pattern.

Keyboard interactions