Skip to content
NAVIGATION · FREE

ContextMenu

Put the right actions under the right mouse button.

Put the right actions under the right mouse button, or the context menu key.

Why it helps

  • Right-click and key support
  • Positioned in the viewport
  • Same items as Menu

Where it fits

  • Table rows
  • Cards
  • Files
ContextMenu control in a RayCraft page

Example

<ContextMenu>
    <ChildContent>
        <div class="doc-demo-box" tabindex="0">Right-click (or press the context menu key) anywhere in this box. Last action: @_last</div>
    </ChildContent>
    <Items>
        <MenuItem Icon="IconName.Copy" OnClick="@(() => _last = "Copy")">Copy</MenuItem>
        <MenuItem Icon="IconName.Paste" OnClick="@(() => _last = "Paste")">Paste</MenuItem>
        <MenuItem Icon="IconName.Delete" OnClick="@(() => _last = "Delete")">Delete</MenuItem>
        <MenuItem Disabled="true">Unavailable</MenuItem>
    </Items>
</ContextMenu>

@code {
    private string _last = "none";
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation