Context Menu

<NaviusContextMenu>
    <NaviusContextMenuTrigger class="... border border-dashed border-border">
        Right click here
    </NaviusContextMenuTrigger>

    <NaviusContextMenuPositioner>
        <NaviusContextMenuPopup class="... min-w-[14rem] bg-popover p-1 shadow-md">
            <NaviusContextMenuItem>Back</NaviusContextMenuItem>
            <NaviusContextMenuItem Disabled="true">Forward</NaviusContextMenuItem>
            <NaviusContextMenuItem>Reload</NaviusContextMenuItem>

            <NaviusContextMenuSub>
                <NaviusContextMenuSubTrigger>More Tools</NaviusContextMenuSubTrigger>
                <NaviusContextMenuSubContent class="... bg-popover p-1 shadow-md">
                    <NaviusContextMenuItem>Save Page As&#8230;</NaviusContextMenuItem>
                    <NaviusContextMenuItem>Developer Tools</NaviusContextMenuItem>
                </NaviusContextMenuSubContent>
            </NaviusContextMenuSub>

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

            <NaviusContextMenuCheckboxItem @bind-Checked="_showBookmarks">
                <NaviusContextMenuItemIndicator>&#10003;</NaviusContextMenuItemIndicator>
                Show Bookmarks
            </NaviusContextMenuCheckboxItem>

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

            <NaviusContextMenuLabel>People</NaviusContextMenuLabel>
            <NaviusContextMenuRadioGroup @bind-Value="_person">
                <NaviusContextMenuRadioItem Value="pedro">
                    <NaviusContextMenuItemIndicator>&#9679;</NaviusContextMenuItemIndicator>
                    Pedro Duarte
                </NaviusContextMenuRadioItem>
                <NaviusContextMenuRadioItem Value="colm">
                    <NaviusContextMenuItemIndicator>&#9679;</NaviusContextMenuItemIndicator>
                    Colm Tuite
                </NaviusContextMenuRadioItem>
            </NaviusContextMenuRadioGroup>
        </NaviusContextMenuPopup>
    </NaviusContextMenuPositioner>
</NaviusContextMenu>

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

Features

• Anchored to the pointer position, with collision-aware flipping and clamping.
• Opens on right click, long press (touch), and the ContextMenu / Shift+F10 keys.
• Supports submenus with configurable reading direction.
• Supports items, labels, groups of items, checkbox items, and radio groups.
• Full keyboard navigation with roving focus and type-ahead.
• Dismissing and layering behavior is highly customizable.

Installation

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

navius add context-menu

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.ContextMenu

<NaviusContextMenu>
    <NaviusContextMenuTrigger />

    <NaviusContextMenuPositioner>
        <NaviusContextMenuPopup>
            <NaviusContextMenuLabel />
            <NaviusContextMenuItem />

            <NaviusContextMenuGroup>
                <NaviusContextMenuItem />
            </NaviusContextMenuGroup>

            <NaviusContextMenuCheckboxItem>
                <NaviusContextMenuItemIndicator />
            </NaviusContextMenuCheckboxItem>

            <NaviusContextMenuRadioGroup>
                <NaviusContextMenuRadioItem>
                    <NaviusContextMenuItemIndicator />
                </NaviusContextMenuRadioItem>
            </NaviusContextMenuRadioGroup>

            <NaviusContextMenuSub>
                <NaviusContextMenuSubTrigger />
                <NaviusContextMenuSubContent />
            </NaviusContextMenuSub>

            <NaviusContextMenuSeparator />
            <NaviusContextMenuArrow />
        </NaviusContextMenuPopup>
    </NaviusContextMenuPositioner>
</NaviusContextMenu>

API Reference

Root

Contains all the parts of a context menu. Owns open state; renders no DOM.

Trigger

The area that opens the context menu. Wrap the target and right-click within its bounds. Renders a div.

Data attributes

Popup

The menu surface that pops out when the context menu is open. Wrapped by the Positioner and self-portaled to the document body. 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

Item

The component that contains the context menu items. Renders a div.

Data attributes

Group

Used to group multiple items. Renders a div with role="group".

Label

Used to render a label. It won't be focusable using arrow keys. Renders a div.

CheckboxItem

An item that can be controlled and rendered like a checkbox. Renders a div.

Data attributes

RadioGroup

Used to group multiple radio items. Renders a div with role="group".

RadioItem

An item that can be controlled and rendered like a radio. Renders a div.

Data attributes

ItemIndicator

Renders when the parent CheckboxItem or RadioItem is checked. You can style this element directly, or use it as a wrapper to put an icon into. Renders a span.

Data attributes

Separator

Used to visually separate items in the context menu. Renders a div with role="separator".

Data attributes

Arrow

An optional arrow element to render alongside the content. This can be used to help visually link the trigger point with the content. Renders an svg.

Sub

Contains all the parts of a submenu. Owns its own open state; renders no DOM.

SubTrigger

An item that opens a submenu. Must be rendered inside a Sub. Renders a div.

Data attributes

SubContent

The component that pops out when a submenu is open. Must be rendered inside a Sub. Renders a div.

Data attributes

Accessibility

Adheres to the menu WAI-ARIA design pattern (without typeahead support) and uses roving tabindex to manage focus movement among menu items.

Keyboard interactions