Blazor Context Menu Overview

The Blazor Context Menu component displays a contextual popup with data (flat or hierarchical) in a traditional menu-like structure. It lets you invoke commands while preserving screen real estate.

In addition to built-in navigation capabilities, you can browse through the items and their children, define templates for the individual nodes, render text and icons/images, and respond to events.

The Context Menu component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Add the TelerikContextMenu tag and set its Selector parameter to a CSS selector that will match the element(s) you want to attach the context menu to.
Provide a collection of models to its Data property. The Context Menu will automatically recognize property names like Id, ParentId, Text and a few others. Otherwise, use bindings to configure custom property names.
Handle the OnClick event to respond to user actions.

Basic context menu with hierarchical data binding and OnClick event handler

@* Use a context menu to perform actions *@

<div class="context-menu-target" style="width:200px; height: 100px; background: yellow; margin-bottom: 50px;">
    Right click (or tap-and-hold on a touch device) for a context menu.
</div>

<TelerikContextMenu Selector=".context-menu-target" Data="@MenuItems"                       
                    OnClick="@( (ContextMenuItem itm) => ClickHandler(itm) )">
</TelerikContextMenu>

@code {
    public List<ContextMenuItem> MenuItems { get; set; }

    async Task ClickHandler(ContextMenuItem clickedItem)
    {
        if (!string.IsNullOrEmpty(clickedItem.CommandName))
        {
            Console.WriteLine($"The programm will now perform the {clickedItem.CommandName} operation");
        }
    }

    protected override void OnInitialized()
    {

        MenuItems = new List<ContextMenuItem>()
        {
            new ContextMenuItem
            {
                Text = "More Info",
                Icon = "information",
                CommandName = "info"
            },
            new ContextMenuItem
            {
                Separator = true
            },
            new ContextMenuItem
            {
                Text = "Advanced",
                Items = new List<ContextMenuItem>()
                {
                    new ContextMenuItem
                    {
                        Text = "Delete",
                        Icon = "delete",
                        CommandName = "delete"
                    },
                    new ContextMenuItem
                    {
                        Text = "Report",
                        Icon = "cancel",
                        CommandName = "report"
                    }
                }
            }
        };

        base.OnInitialized();
    }

    public class ContextMenuItem
    {
        public string Text { get; set; }
        public string CommandName { get; set; }
        public string Icon { get; set; }
        public bool Separator { get; set; }
        public List<ContextMenuItem> Items { get; set; }
    }
}

Data Binding

To show any items, the Blazor Context Menu requires a data source that you can provide through the Data property. The Context Menu allows you to display the items both as flat data and hierarchically. Read more about the Blazor Context Menu data binding...

Customize per Target

The same context menu can easily be attached to many targets, or you can use its ShowAsync(x, y) method to show it explicitly based on your business logic needs, data and events. Read more in the Integration article.

Navigate Views

A menu is often used to list pages, views or sections in an application so the user can navigate through them. To do that with a menu, you have two options:

Use the built-in UrlField in the bound data to populate the URLs in the anchors the menu will generate for you if an URL is provided for the given item. An example is available in the beginning of this article.
Use a Template to generate the desired links (e.g., NavLink components) with your own code to enable fine-tuning.

Attribute	Type and Default Value	Description
`Class`	`string`	Renders additional CSS class to the main wrapping element of the component. Use it to apply custom styles or override the theme.
`Selector`	`string`	CSS selector of the target elements where the Context Menu will be shown.

Add a reference to the component instance to use the Context Menu methods.

Method	Description
`ShowAsync`	programmatically shows the ContextMenu
`HideAsync`	programmatically hides the ContextMenu

@* Open and close the ContextMenu programmatically *@

<div @oncontextmenu:preventDefault="true"
     @oncontextmenu="@( (MouseEventArgs e) => ShowContextMenu(e, false) )"
     class="menuTarget">
    normal target
</div>

<TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu">
    <Template>
        @{
            var dataSource = context as List<ContextMenuItem>;
            <p>We have this data:</p>
            <ul>
                @foreach (var item in dataSource)
                {
                    <li>@item.Text</li>
                }
            </ul>
        }

        <TelerikButton OnClick="@(async () => await TheContextMenu.HideAsync())">Close</TelerikButton>
    </Template>
</TelerikContextMenu>

@code {
    public List<ContextMenuItem> MenuItems { get; set; }

    // the context menu is a generic component and its type depends on the model it binds to
    TelerikContextMenu<ContextMenuItem> TheContextMenu { get; set; }

    async Task ShowContextMenu(MouseEventArgs e, bool IsSpecial)
    {
        await TheContextMenu.ShowAsync(e.ClientX, e.ClientY);
    }

    // generate sample data for the listview and the menu
    protected override void OnInitialized()
    {
        MenuItems = new List<ContextMenuItem>()
    {
            new ContextMenuItem
            {
                Text = "More Info",
                Metadata = "info"
            },
            new ContextMenuItem
            {
                Text = "Special Command",
                Metadata = "special"
            }
        };

        base.OnInitialized();
    }

    public class ContextMenuItem
    {
        public string Text { get; set; }
        public string Metadata { get; set; }
    }
}

<style>
    .menuTarget {
        width: 100px;
        background: yellow;
        margin: 50px;
    }
</style>

Next Steps

Binding the Context Menu to Data
Handle the OnClick event of the Context Menu to respond to the user action

Creating Context Menu

Data Binding

Customize per Target

Navigate Views

Icons

Templates

Events

Context Menu Parameters

Context Menu Reference and Methods

Next Steps

See Also

Getting Started

Community

Support Resources

Sample Applications