Blazor ContextMenu - Overview

Right-click to open Context menu

  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

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

Description

The Telerik UI for Blazor Context Menu component provides users with an easily accessible shortcut menu of frequently used commands. To use it in Blazor applications, you need to add the <TelerikContextMenu> tag to your razor page and set its Selector parameter to a CSS selector that will match the element(s) you want to attach the context menu to. Then, to populate the menu items, you need to provide a collection of models to its Data property and handle the OnClick event to respond to the user action. You can further add an image, icon class or a font icon for each item in the Context Menu to illustrate its purpose for your users.

The Blazor Context Menu supports binding to hierarchical data (separate collections of items and their child items) and flat data (a single collection of items with defined parent-child relationships).

To customize the appearance and behavior of the context menu, you can take advantage of the built-in options for item and content templates. The templating feature allows you to have full control of the rendering of the entire popup and each individual content menu item.

The power of the Telerik Context Menu comes when it is integrated with other Telerik Blazor components that support the ContextMenu event, such as the Data Grid, TreeList, Scheduler and TreeView. To integrate the ContextMenu with the Telerik Grid, you need to use the Grid OnRowContextMenu event to get the current row model and show the menu, then handle the desired operation in the ContextMenu OnClick event.

This Blazor ContextMenu Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.