Context Menu

Overview

Context Menu is a thirteen-part composite over the Navius ContextMenu primitive family, anchored to the cursor point. ZitsContextMenu renders NaviusContextMenu, ZitsContextMenuTrigger renders NaviusContextMenuTrigger, and ZitsContextMenuContent renders the NaviusContextMenuPortal > NaviusContextMenuPositioner (fixed Side="right" Align="start") > NaviusContextMenuPopup stack. Item, checkbox, radio, label, separator, and submenu parts each wrap their matching Navius primitive; ZitsContextMenuShortcut is a plain span with no composed primitive.

Install

navius add context-menu --to ./src/MyApp --namespace MyApp.Ui

Usage

<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>
        <ZitsContextMenuSeparator />
        <ZitsContextMenuCheckboxItem @bind-Checked="_bookmarks">Show Bookmarks Bar</ZitsContextMenuCheckboxItem>
        <ZitsContextMenuRadioGroup @bind-Value="_person">
            <ZitsContextMenuRadioItem Value="pedro">Pedro Duarte</ZitsContextMenuRadioItem>
        </ZitsContextMenuRadioGroup>
    </ZitsContextMenuContent>
</ZitsContextMenu>

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

Parts and props

Prop	Type	Default	Description
`ZitsContextMenuItem.Inset`	`bool`	`false`	Adds left padding (`pl-8`) to align with checkbox/radio items. Visual only, not forwarded to `NaviusContextMenuItem`.
`ZitsContextMenuLabel.Inset`	`bool`	`false`	Same visual-only inset, not forwarded to `NaviusContextMenuLabel`.
`ZitsContextMenuSubTrigger.Inset`	`bool`	`false`	Same visual-only inset, not forwarded to `NaviusContextMenuSubTrigger`.

Every other parameter (Open/OpenChanged/DefaultOpen, Checked/CheckedChanged/ DefaultChecked, Value/ValueChanged/DefaultValue, Disabled, OnSelect, TextValue) passes straight through to the matching Navius primitive, unchanged.

Styling surface

ZitsContextMenuContent, ZitsContextMenuItem, ZitsContextMenuCheckboxItem, ZitsContextMenuRadioItem, ZitsContextMenuLabel, ZitsContextMenuSeparator, ZitsContextMenuShortcut, ZitsContextMenuSubContent, ZitsContextMenuSubTrigger, ZitsContextMenuGroup, ZitsContextMenuRadioGroup, and ZitsContextMenuTrigger all accept Attributes, merged via Cn.Merge with the caller’s classes applied last. ZitsContextMenu and ZitsContextMenuSub render no DOM of their own and take no Attributes.

Parameter	Values
`Item.Inset` / `Label.Inset` / `SubTrigger.Inset`	`true` · `false`

Data attribute hooks

Part	Attribute	Description
Content / SubContent	`data-open`, `data-closed`, `data-side`	Drive the enter/exit animation and per-side slide-in, emitted by `NaviusContextMenuPopup`/`NaviusContextMenuSubContent`.
Item / CheckboxItem / RadioItem	`data-highlighted`, `data-disabled`	Drive the accent background and disabled opacity, emitted by the composed Navius item primitives.
SubTrigger	`data-popup-open`	Keeps the accent background while its submenu is open.