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

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

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.

Popup

The menu surface, wrapped by the Positioner that anchors it against the trigger. Self-portals; renders a div with role="menu". The Side / Align / SideOffset / AlignOffset / AvoidCollisions / CollisionPadding / Sticky / HideWhenDetached / ArrowPadding props are set on the enclosing Positioner.

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

Adheres to the menu & menubar WAI-ARIA design pattern.

Keyboard interactions