The Context Menu component allows you to add a context menu to your Blazor application. To invoke the context menu at runtime, users can right-click (on mouse-equipped devices) or long press (on touch-enabled devices, except for iOS) the area where they want to display the context menu. To display the context menu in code, call the ShowAsync method.

The Context Menu component also supports keyboard navigation. To open the context menu with the keyboard, focus the menu owner element and press Shift+F10 or Menu.

You can bind the Context Menu to hierarchical data structures to populate menu items. Follow the steps below:

1. Use the Context Menu's Data property to specify a data source.
2. Add the <DataMappings> tag to the component markup.
3. In the <DataMappings> tags, create the DxContextMenuDataMapping instance and map item properties to data source fields. Mappings are used to adjust the Context Menu's data model to the data source. For hierarchical data, the Children property is required.

The Context Menu component allows you to use templates to customize the layout and appearance of menu items.

Use the following properties to specify default templates for all items:

• DxContextMenu.ItemTemplate
• DxContextMenu.ItemTextTemplate
• DxContextMenu.SubMenuTemplate

The following members allow you to set templates for individual items (they override the default templates):

• DxContextMenuItem.Template
• DxContextMenuItem.TextTemplate
• DxContextMenuItem.SubMenuTemplate

This module demonstrates how to define submenu templates for the Text color and Background color menu items. The Reset Colors item is disabled until you select text or background color.