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 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To use a Telerik Context Menu for Blazor:
- 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 (read more in the Data Binding article) - match the fields in the models with the binding schema for the nodes
- handle the
OnClickevent to respond to the user action
Basic context menu with hierarchical data binding and click 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"
TextField="Text" SeparatorField="Separator" IconField="Icon"
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; }
}
}
The result from the snippet above, after right clicking the yellow target and hovering the "Advanced" item
Component namespace and reference
@using Telerik.Blazor.Components
<TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu">
</TelerikContextMenu>
@code {
// the context menu is a generic component and its type depends on the model it binds to
TelerikContextMenu<ContextMenuItem> TheContextMenu { get; set; }
List<ContextMenuItem> MenuItems { get; set; }
protected override void OnInitialized()
{
MenuItems = new List<ContextMenuItem>()
{
new ContextMenuItem
{
Text = "Item 1"
},
new ContextMenuItem
{
Text = "Item 2"
}
};
base.OnInitialized();
}
public class ContextMenuItem
{
public string Text { get; set; }
public List<ContextMenuItem> Items { get; set; }
}
}
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.
You can find an example of a menu used to navigate between pages in an app in the Navigation article.
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.
Methods
The ContextMenu methods are accessible through it's reference:
-
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; }
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>