ContextMenu
A menu that appears on right-click, providing contextual actions for the target element.
Divergence from Blok
No Radix portal or state-driven animations. Blok wraps Radix UI primitives that portal content to document.body and animate via Radix state attributes. In Blazor the content is fixed-positioned in the render tree — no portal is needed, and animate-out requires keeping the element in DOM which we don't do. ContextMenuPortal is a no-op passthrough for API parity.
Hover-driven submenus instead of focus-driven. Blok's ContextMenuSubTrigger opens the sub-menu via Radix keyboard focus management. Blazor uses @onmouseenter / @onmouseleave instead — equivalent visual result, different trigger mechanism.
CheckboxItem keeps the menu open. Blok/Radix CheckboxItems toggle state without closing the menu. This implementation matches that behaviour — click outside (the backdrop) to dismiss.
Examples
Default
With Shortcut
With Submenu
With Checkbox Items
With Radio Items
With Groups
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| ContextMenu | Root state container. Tracks whether the menu is open and the mouse-origin (X, Y) coordinate so ContextMenuContent can render at the cursor. |
| ContextMenuTrigger | Right-click catcher. Captures contextmenu events, cancels the browser default, and calls ContextMenu.OpenAt(clientX, clientY). |
| ContextMenuContent | Positioned menu surface. Renders fixed at the cursor (X, Y) when the parent is open, with a full-viewport backdrop that closes the menu on outside click. |
| ContextMenuItem | A single actionable menu entry. Closes the entire menu chain (including any open ContextMenuSub) on click. |
| ContextMenuCheckboxItem | A toggle menu entry with a check indicator. The menu stays open after toggling so multiple items can be changed in one gesture. |
| ContextMenuRadioGroup | Wraps a set of ContextMenuRadioItem components, sharing the selected Value via cascade. Supports @bind-Value for two-way binding. |
| ContextMenuRadioItem | A single-select menu entry. Renders a filled circle indicator when its Value matches the parent ContextMenuRadioGroup.Value. |
| ContextMenuLabel | A non-interactive heading inside a menu section or group. Renders in text-muted-foreground with font-semibold uppercase. |
| ContextMenuSeparator | A horizontal rule that visually separates menu sections. |
| ContextMenuShortcut | Keyboard shortcut hint rendered at the trailing edge of a ContextMenuItem. Styled in text-muted-foreground text-xs tracking-widest. |
| ContextMenuGroup | A semantic grouping wrapper (role="group") with no visual chrome. Useful for wrapping a ContextMenuLabel and its items. |
| ContextMenuSub | Sub-menu state holder. Uses JS to compute the trigger's bounds so ContextMenuSubContent can appear to the right of ContextMenuSubTrigger. |
| ContextMenuSubTrigger | The item inside a ContextMenuSub that opens the sub-menu on hover. Renders a chevron-right icon at the trailing edge. |
| ContextMenuSubContent | The popup panel that appears to the right of ContextMenuSubTrigger when the sub-menu is open. |
| ContextMenuPortal | No-op passthrough provided for API parity with Blok. Blok renders via a Radix portal to document.body; Blazor uses position:fixed natively. |
ContextMenu
Root state container. Tracks whether the menu is open and the mouse-origin (X, Y) coordinate so ContextMenuContent can render at the cursor.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Should contain one ContextMenuTrigger and one ContextMenuContent. |
ContextMenuTrigger
Right-click catcher. Captures contextmenu events, cancels the browser default, and calls ContextMenu.OpenAt(clientX, clientY).
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes on the trigger wrapper <div>. | |
| ChildContent | RenderFragment? | The target region users right-click to open the menu. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the trigger wrapper. |
ContextMenuContent
Positioned menu surface. Renders fixed at the cursor (X, Y) when the parent is open, with a full-viewport backdrop that closes the menu on outside click.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes on the menu surface. | |
| ChildContent | RenderFragment? | Menu items — ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuSub, etc. |
ContextMenuItem
A single actionable menu entry. Closes the entire menu chain (including any open ContextMenuSub) on click.
| Property | Type | Required | Description |
|---|---|---|---|
| Click | EventCallback | Invoked before the menu closes. | |
| Variant | ContextMenuItemVariant | Visual style. Default: ContextMenuItemVariant.Default. Use Destructive for danger actions. | |
| Inset | bool | Adds pl-8 left padding to align with items that have an icon or indicator. Default: false. | |
| Disabled | bool | Suppresses click and dims the item. Default: false. | |
| ChildContent | RenderFragment? | Item label, optionally followed by a ContextMenuShortcut. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuCheckboxItem
A toggle menu entry with a check indicator. The menu stays open after toggling so multiple items can be changed in one gesture.
| Property | Type | Required | Description |
|---|---|---|---|
| Checked | bool | Whether the item is checked. Supports @bind-Checked. Default: false. | |
| CheckedChanged | EventCallback<bool> | Raised when the user toggles the item. | |
| Disabled | bool | Suppresses click and dims the item. Default: false. | |
| ChildContent | RenderFragment? | Item label. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuRadioGroup
Wraps a set of ContextMenuRadioItem components, sharing the selected Value via cascade. Supports @bind-Value for two-way binding.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string? | The currently selected item value. Supports @bind-Value. | |
| ValueChanged | EventCallback<string?> | Raised when the user selects a radio item. | |
| ChildContent | RenderFragment? | Should contain ContextMenuRadioItem components. | |
| ClassName | string? | Extra CSS classes on the group <div>. |
ContextMenuRadioItem
A single-select menu entry. Renders a filled circle indicator when its Value matches the parent ContextMenuRadioGroup.Value.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string | The value this item represents. Required — compared with the parent radio group's selected value. | |
| Disabled | bool | Suppresses click and dims the item. Default: false. | |
| ChildContent | RenderFragment? | Item label. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuLabel
A non-interactive heading inside a menu section or group. Renders in text-muted-foreground with font-semibold uppercase.
| Property | Type | Required | Description |
|---|---|---|---|
| Inset | bool | Adds pl-8 to align with inset items. Default: false. | |
| ChildContent | RenderFragment? | Label text. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuSeparator
A horizontal rule that visually separates menu sections.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes. |
ContextMenuShortcut
Keyboard shortcut hint rendered at the trailing edge of a ContextMenuItem. Styled in text-muted-foreground text-xs tracking-widest.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Shortcut text, e.g. ⌘K or Ctrl+S. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuGroup
A semantic grouping wrapper (role="group") with no visual chrome. Useful for wrapping a ContextMenuLabel and its items.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Label and items for this group. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuSub
Sub-menu state holder. Uses JS to compute the trigger's bounds so ContextMenuSubContent can appear to the right of ContextMenuSubTrigger.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Should contain one ContextMenuSubTrigger and one ContextMenuSubContent. |
ContextMenuSubTrigger
The item inside a ContextMenuSub that opens the sub-menu on hover. Renders a chevron-right icon at the trailing edge.
| Property | Type | Required | Description |
|---|---|---|---|
| Inset | bool | Adds pl-8 left padding. Default: false. | |
| ChildContent | RenderFragment? | Trigger label. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuSubContent
The popup panel that appears to the right of ContextMenuSubTrigger when the sub-menu is open.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Sub-menu items. | |
| ClassName | string? | Extra CSS classes. |
ContextMenuPortal
No-op passthrough provided for API parity with Blok. Blok renders via a Radix portal to document.body; Blazor uses position:fixed natively.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Passed through directly. |