sufi-blazor/docs/components/overlays/SbContextMenu.md

SbContextMenu

A right-click context menu component that appears at the cursor position.

Parameters

Parameter	Type	Default	Description
Disabled	bool	false	Whether the context menu is disabled
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
OnOpen	EventCallback<SbContextMenuEventArgs>	Fired before menu opens (can cancel)
OnClose	EventCallback	Fired when menu closes

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment	Content that triggers the context menu
MenuContent	RenderFragment	Menu items

Methods

Method	Return Type	Description
Close()	Task	Close the context menu

SbContextMenuEventArgs Class

public class SbContextMenuEventArgs
{
    public double X { get; set; }   // X coordinate
    public double Y { get; set; }   // Y coordinate
    public bool Cancel { get; set; } // Set to true to cancel opening
}

CSS Classes

• sb-context-menu-trigger - Trigger wrapper
• sb-context-menu-overlay - Backdrop overlay
• sb-context-menu - Menu container

Examples

Basic Usage

<SbContextMenu>
    <ChildContent>
        <div class="content-area">
            Right-click here for options
        </div>
    </ChildContent>
    <MenuContent>
        <SbMenuItem Text="Cut" OnClick="Cut">
            <Icon><SbIcon Name="SufiChainsors" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Copy" OnClick="Copy">
            <Icon><SbIcon Name="copy" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Paste" OnClick="Paste">
            <Icon><SbIcon Name="clipboard" /></Icon>
        </SbMenuItem>
    </MenuContent>
</SbContextMenu>

File Browser Context Menu

<SbContextMenu>
    <ChildContent>
        <div class="file-item">
            <SbIcon Name="file" />
            <span>document.pdf</span>
        </div>
    </ChildContent>
    <MenuContent>
        <SbMenuItem Text="Open" OnClick="OpenFile">
            <Icon><SbIcon Name="external-link" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Download" OnClick="DownloadFile">
            <Icon><SbIcon Name="download" /></Icon>
        </SbMenuItem>
        <SbDivider />
        <SbMenuItem Text="Rename" OnClick="RenameFile">
            <Icon><SbIcon Name="edit" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Move to..." OnClick="MoveFile">
            <Icon><SbIcon Name="folder" /></Icon>
        </SbMenuItem>
        <SbDivider />
        <SbMenuItem Text="Delete" OnClick="DeleteFile">
            <Icon><SbIcon Name="trash" Color="SbColor.Danger" /></Icon>
        </SbMenuItem>
    </MenuContent>
</SbContextMenu>

DataGrid Row Context Menu

<SbDataGrid Items="@items">
    <SbColumn Field="Name" Title="Name" />
    <SbColumn Field="Status" Title="Status" />
    <RowTemplate Context="row">
        <SbContextMenu>
            <ChildContent>
                <tr>
                    <td>@row.Item.Name</td>
                    <td>@row.Item.Status</td>
                </tr>
            </ChildContent>
            <MenuContent>
                <SbMenuItem Text="View" OnClick="() => View(row.Item)" />
                <SbMenuItem Text="Edit" OnClick="() => Edit(row.Item)" />
                <SbDivider />
                <SbMenuItem Text="Delete" OnClick="() => Delete(row.Item)" />
            </MenuContent>
        </SbContextMenu>
    </RowTemplate>
</SbDataGrid>

Conditional Menu Items

<SbContextMenu OnOpen="HandleOpen">
    <ChildContent>
        <div class="content">@selectedItem?.Name</div>
    </ChildContent>
    <MenuContent>
        <SbMenuItem Text="View" OnClick="View" />
        @if (canEdit)
        {
            <SbMenuItem Text="Edit" OnClick="Edit" />
        }
        @if (canDelete)
        {
            <SbDivider />
            <SbMenuItem Text="Delete" OnClick="Delete" />
        }
    </MenuContent>
</SbContextMenu>

@code {
    private void HandleOpen(SbContextMenuEventArgs args)
    {
        // Determine permissions based on context
        canEdit = currentUser.HasPermission("edit");
        canDelete = currentUser.HasPermission("delete");
    }
}

Cancel Opening

<SbContextMenu OnOpen="HandleOpen">
    <ChildContent>
        <div>Right-click when enabled</div>
    </ChildContent>
    <MenuContent>
        <SbMenuItem Text="Action" OnClick="DoAction" />
    </MenuContent>
</SbContextMenu>

@code {
    private bool isEnabled = false;
    
    private void HandleOpen(SbContextMenuEventArgs args)
    {
        if (!isEnabled)
        {
            args.Cancel = true; // Prevent menu from opening
        }
    }
}

Disabled Context Menu

<SbContextMenu Disabled="@isReadOnly">
    <ChildContent>
        <div class="document">
            Document content (context menu disabled in read-only mode)
        </div>
    </ChildContent>
    <MenuContent>
        <SbMenuItem Text="Edit" OnClick="Edit" />
        <SbMenuItem Text="Delete" OnClick="Delete" />
    </MenuContent>
</SbContextMenu>

Canvas/Drawing Context Menu

<SbContextMenu @ref="canvasContextMenu" OnOpen="HandleCanvasContextMenu">
    <ChildContent>
        <canvas @ref="canvasRef" width="800" height="600" />
    </ChildContent>
    <MenuContent>
        @if (selectedShape != null)
        {
            <SbMenuItem Text="Edit Shape" OnClick="EditShape" />
            <SbMenuItem Text="Duplicate" OnClick="DuplicateShape" />
            <SbMenuItem Text="Bring to Front" OnClick="BringToFront" />
            <SbMenuItem Text="Send to Back" OnClick="SendToBack" />
            <SbDivider />
            <SbMenuItem Text="Delete" OnClick="DeleteShape" />
        }
        else
        {
            <SbMenuItem Text="Add Rectangle" OnClick="AddRectangle" />
            <SbMenuItem Text="Add Circle" OnClick="AddCircle" />
            <SbMenuItem Text="Add Text" OnClick="AddText" />
            <SbDivider />
            <SbMenuItem Text="Paste" OnClick="Paste" Disabled="@(!hasClipboard)" />
        }
    </MenuContent>
</SbContextMenu>

@code {
    private SbContextMenu canvasContextMenu;
    private Shape? selectedShape;
    
    private void HandleCanvasContextMenu(SbContextMenuEventArgs args)
    {
        // Check if a shape is at the click position
        selectedShape = FindShapeAt(args.X, args.Y);
    }
}

Tree View Context Menu

<SbTreeView Items="@folders" ChildSelector="f => f.Children" TextSelector="f => f.Name">
    <ItemTemplate Context="folder">
        <SbContextMenu>
            <ChildContent>
                <span>@folder.Name</span>
            </ChildContent>
            <MenuContent>
                <SbMenuItem Text="New Folder" OnClick="() => NewFolder(folder)" />
                <SbMenuItem Text="New File" OnClick="() => NewFile(folder)" />
                <SbDivider />
                <SbMenuItem Text="Rename" OnClick="() => Rename(folder)" />
                <SbMenuItem Text="Delete" OnClick="() => Delete(folder)" 
                            Disabled="@(folder.Children.Any())" />
            </MenuContent>
        </SbContextMenu>
    </ItemTemplate>
</SbTreeView>