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.
Creating Context Menu
- Add the
TelerikContextMenutag and set itsSelectorparameter 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
Dataproperty. The Context Menu will automatically recognize property names likeId,ParentId,Textand a few others. Otherwise, use bindings to configure custom property names. - Handle the
OnClickevent 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 = FontIcon.InfoCircle,
CommandName = "info"
},
new ContextMenuItem
{
Separator = true
},
new ContextMenuItem
{
Text = "Advanced",
Items = new List<ContextMenuItem>()
{
new ContextMenuItem
{
Text = "Delete",
Icon = FontIcon.Trash,
CommandName = "delete"
},
new ContextMenuItem
{
Text = "Report",
Icon = FontIcon.Cancel,
CommandName = "report"
}
}
}
};
base.OnInitialized();
}
public class ContextMenuItem
{
public string Text { get; set; }
public string CommandName { get; set; }
public FontIcon? 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
UrlFieldin 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.,
NavLinkcomponents) with your own code to enable fine-tuning.
Read more about the Blazor Context Menu navigation...
Icons
To illustrate the purpose of each menu item, the Blazor Context Menu allows you to add images, icon classes, or font icons. Read more about the Blazor Menu icons...
Templates
You can use the functionality of the built-in templates and customize what is rendered in the items. Read more about the Blazor Context Menu templates...
Events
The Context Menu generates events that you can handle and further customize its behavior. Read more about the Blazor Context Menu events...
Context Menu Parameters
The following table lists Context Menu parameters, which are not related to other features on this page. Check the Context Menu API Reference for a full list of properties, methods and events.
| 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. |
Context Menu Reference and Methods
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
Handle the
OnClickevent of the Context Menu to respond to the user action