Menubar

<NaviusMenubar @bind-Value="_menu">
    <NaviusMenubarMenu Value="file">
        <NaviusMenubarTrigger class="... data-[popup-open]:bg-accent">File</NaviusMenubarTrigger>
        <NaviusMenubarPositioner SideOffset="6">
            <NaviusMenubarPopup
                class="... bg-popover text-popover-foreground shadow-md">
                <NaviusMenubarItem>New Tab <span class="ml-auto">⌘T</span></NaviusMenubarItem>
                <NaviusMenubarItem Disabled="true">New Incognito Window</NaviusMenubarItem>
                <NaviusMenubarSeparator class="-mx-1 my-1 h-px bg-border" />

                <NaviusMenubarSub>
                    <NaviusMenubarSubTrigger>Share</NaviusMenubarSubTrigger>
                    <NaviusMenubarSubContent class="... bg-popover shadow-md">
                        <NaviusMenubarItem>Email Link</NaviusMenubarItem>
                    </NaviusMenubarSubContent>
                </NaviusMenubarSub>
            </NaviusMenubarPopup>
        </NaviusMenubarPositioner>
    </NaviusMenubarMenu>

    <NaviusMenubarMenu Value="view">
        <NaviusMenubarTrigger>View</NaviusMenubarTrigger>
        <NaviusMenubarPositioner>
            <NaviusMenubarPopup>
                <NaviusMenubarCheckboxItem @bind-Checked="_bookmarks">
                    <NaviusMenubarItemIndicator>✓</NaviusMenubarItemIndicator>
                    Always Show Bookmarks Bar
                </NaviusMenubarCheckboxItem>
                <NaviusMenubarRadioGroup @bind-Value="_profile">
                    <NaviusMenubarRadioItem Value="benoit">
                        <NaviusMenubarItemIndicator>●</NaviusMenubarItemIndicator>
                        Benoit
                    </NaviusMenubarRadioItem>
                </NaviusMenubarRadioGroup>
            </NaviusMenubarPopup>
        </NaviusMenubarPositioner>
    </NaviusMenubarMenu>
</NaviusMenubar>

@code {
    private string? _menu;
    private bool? _bookmarks = true;
    private string? _profile = "benoit";
}

Features

• Can be controlled (@bind-Value) or uncontrolled (DefaultValue); at most one menu open at a time.
• Roving tabindex across the top-level triggers, with "follow focus" reopening as you arrow between menus.
• Supports submenus with configurable side/align, checkbox items, and radio groups.
• Items can be disabled, and full keyboard navigation with type-ahead is built in.
• Content self-portals to document.body and is positioned by the engine, escaping overflow and stacking contexts.
• Direction-aware: flips arrow keys and submenu sides 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 menubar

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.Menubar

<NaviusMenubar>
    <NaviusMenubarMenu Value="menu-1">
        <NaviusMenubarTrigger />
        <NaviusMenubarPositioner>
            <NaviusMenubarPopup>
                <NaviusMenubarLabel />
                <NaviusMenubarItem />

                <NaviusMenubarGroup>
                    <NaviusMenubarItem />
                </NaviusMenubarGroup>

                <NaviusMenubarCheckboxItem>
                    <NaviusMenubarItemIndicator />
                </NaviusMenubarCheckboxItem>

                <NaviusMenubarRadioGroup>
                    <NaviusMenubarRadioItem>
                        <NaviusMenubarItemIndicator />
                    </NaviusMenubarRadioItem>
                </NaviusMenubarRadioGroup>

                <NaviusMenubarSeparator />

                <NaviusMenubarSub>
                    <NaviusMenubarSubTrigger />
                    <NaviusMenubarSubContent />
                </NaviusMenubarSub>

                <NaviusMenubarArrow />
            </NaviusMenubarPopup>
        </NaviusMenubarPositioner>
    </NaviusMenubarMenu>
</NaviusMenubar>

API Reference

Root

Contains all the parts of a menubar. Renders a div with role="menubar".

Data attributes

Menu

Groups a trigger and its content into one menu. Renders no DOM of its own.

Trigger

Toggles the menu it belongs to. Renders a button with role="menuitem".

Data attributes

Portal

Teleports the popup into document.body (or Container). Renders no DOM of its own.

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.

Popup

The menu surface, wrapped by the Positioner and self-portaled to document.body. Renders a div with role="menu".

Data attributes

Arrow

An optional arrow pointing from the content at its trigger. Renders an svg.

Item

A selectable item inside a menu. Renders a div with role="menuitem".

Data attributes

Group

Groups related items. Renders a div with role="group".

Label

A non-interactive label, skipped by roving focus. Renders a div.

CheckboxItem

An item that can be checked, like a checkbox. Renders a div with role="menuitemcheckbox".

Data attributes

RadioGroup

Groups radio items so exactly one is selected. Renders a div with role="group".

RadioItem

An item that can be checked within a radio group. Renders a div with role="menuitemradio".

Data attributes

ItemIndicator

Renders only when its parent checkbox/radio item is checked. Renders a span.

Data attributes

Separator

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

Sub

Contains the parts of a submenu, with its own open state. Renders no DOM of its own.

SubTrigger

An item that opens a submenu. Renders a div with role="menuitem".

Data attributes

SubContent

The submenu surface, anchored to the SubTrigger and portaled. Renders a div with role="menu".

Data attributes

Accessibility

Implements the roles, states, and keyboard map of the menu & menubar WAI-ARIA APG pattern. Covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions