New to Kendo UI for Angular? Start a free 30-day trial

Items

You can instantiate the ContextMenu items by initializing them as MenuItem components and use their corresponding properties.

ContextMenu children are represented by nesting the MenuItem components.

The MenuItem component provides configuration options for:

Showing Text

You can set the text of the ContextMenu items by using the text input of the MenuItem component.

Example
View Source
Change Theme:

Rendering URLs

You can set the URL of the items by using the url input of the MenuItem component. The URL will be rendered as a href attribute on the item link.

Example
View Source
Change Theme:

Displaying Icons

Depending on the configuration of the project, you can enhance the content of the ContextMenu by displaying any of the following icon types:

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

Displaying SVG Icons

To display an SVG icon in the items of the ContextMenu, select the desired one from the list of SVG icons supported by Kendo UI for Angular, and set the svgIcon property to the necessary icon name.

<kendo-menu-item [svgIcon]="svgFolder"></kendo-menu-item>

The following example demonstrates how to set the svgIcon property of the MenuItem component.

Example
View Source
Change Theme:

Displaying Font Icons

To display a font icon inside the items of the ContextMenu:

  1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
  2. Set the icon property to the necessary icon. For more details, go to the list of font icons supported by Kendo UI for Angular.
<kendo-menu-item icon="folder"></kendo-menu-item>

The following example demonstrates how to set the icon property of the MenuItem component.

Example
View Source
Change Theme:

Adding Styles and Classes

You can set styles and classes to the items by using the cssStyle and cssClass inputs of the MenuItem component. cssStyle and cssClass support the same values as ngStyle and ngClass.

Example
View Source
Change Theme:

Disabling Items

You can specify that a ContextMenu item is disabled by using the disabled input of the MenuItem component.

Example
View Source
Change Theme:

Showing Separator Items

You can specify that an item will be rendered as separating other items by using the separator input of the MenuItem component.

Example
View Source
Change Theme:

Templates

To define a template for an item, nest an <ng-template> tag with the kendoMenuItemTemplate directive inside a MenuItem component.

To define a template for an item link, nest an <ng-template> tag with the kendoMenuItemLinkTemplate directive inside a MenuItem component.

To define a template for the item content in place of the children, nest an <ng-template> tag with a kendoMenuItemContentTemplate directive inside that item.

Example
View Source
Change Theme: