How to open and close Context Menu in Blazor

27 Aug 20261 minute to read

Open and close the Context Menu manually whenever required by using the OpenAsync and Close methods. In the following sample, the Context Menu manually opens while clicking the button using the OpenAsync method with ClientX and ClientY coordinates.

To manually close the Context Menu, the Close method can be used.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<div id="target">
    <SfContextMenu @ref="contextMenuObj" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Cut"></MenuItem>
            <MenuItem Text="Copy"></MenuItem>
            <MenuItem Text="Paste"></MenuItem>
        </MenuItems>
    </SfContextMenu>
    <SfButton @onclick="OpenContextMenu">Open ContextMenu</SfButton>
</div>

@code {
    private SfContextMenu<MenuItem> contextMenuObj;
    private async Task OpenContextMenu(MouseEventArgs e)
    {
        await contextMenuObj.OpenAsync(e.ClientX, e.ClientY);
    }
}