Components / Context Menu

Context Menu

Displays a menu at the pointer, triggered by a right click. Built on the Navius brain: anchored to the cursor point with roving focus, type-ahead, checkbox/radio items and nested submenus. This preview is the real component running in WebAssembly.

Examples

Right click here

razor

<ZitsContextMenu>
    <ZitsContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
    </ZitsContextMenuTrigger>
    <ZitsContextMenuContent class="w-64">
        <ZitsContextMenuItem Inset="true">
            Back
            <ZitsContextMenuShortcut>⌘[</ZitsContextMenuShortcut>
        </ZitsContextMenuItem>
        <ZitsContextMenuItem Inset="true" Disabled="true">Forward</ZitsContextMenuItem>
        <ZitsContextMenuSub>
            <ZitsContextMenuSubTrigger Inset="true">More Tools</ZitsContextMenuSubTrigger>
            <ZitsContextMenuSubContent class="w-48">
                <ZitsContextMenuItem>Save Page As…</ZitsContextMenuItem>
                <ZitsContextMenuItem>Developer Tools</ZitsContextMenuItem>
            </ZitsContextMenuSubContent>
        </ZitsContextMenuSub>
        <ZitsContextMenuSeparator />
        <ZitsContextMenuCheckboxItem @bind-Checked="_bookmarks">Show Bookmarks Bar</ZitsContextMenuCheckboxItem>
        <ZitsContextMenuSeparator />
        <ZitsContextMenuLabel Inset="true">People</ZitsContextMenuLabel>
        <ZitsContextMenuRadioGroup @bind-Value="_person">
            <ZitsContextMenuRadioItem Value="pedro">Pedro Duarte</ZitsContextMenuRadioItem>
            <ZitsContextMenuRadioItem Value="colm">Colm Tuite</ZitsContextMenuRadioItem>
        </ZitsContextMenuRadioGroup>
    </ZitsContextMenuContent>
</ZitsContextMenu>

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

Installation

Terminal bash

navius add context-menu

API reference

ZitsContextMenu

Prop	Type	Default
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
ChildContent	RenderFragment?	-

ZitsContextMenuContent

Prop	Type	Default
ChildContent	RenderFragment?	-
Attributes	IDictionary<string, object>?	-

ZitsContextMenuItem

Prop	Type	Default
Inset	bool	false
Disabled	bool	false
OnSelect	EventCallback<NaviusSelectEventArgs>	-
TextValue	string?	-

ZitsContextMenuCheckboxItem

Prop	Type	Default
Checked	bool?	-
CheckedChanged	EventCallback<bool?>	-
DefaultChecked	bool?	-
Disabled	bool	false
OnSelect	EventCallback<NaviusSelectEventArgs>	-

ZitsContextMenuRadioGroup / ZitsContextMenuRadioItem

Prop	Type	Default
Value	string?	-
ValueChanged	EventCallback<string?>	-
DefaultValue	string?	-
Value (RadioItem)	string	required
Disabled	bool	false