Templates

The Menu enables you to customize the items or their content by using templates.

Item Template

To set a template for all Menu items, add an <ng-template> tag with the kendoMenuItemTemplate directive inside the Menu component.

The following example demonstrates how to display an icon next to the text of a Menu item.

Example
View Source
Edit In Stackblitz  
Change Theme:

To set a template for specific items, nest the template in a <kendo-menu-item> component or set the template field of the item.

The following example demonstrates how to set templates to the items.

Example
View Source
Edit In Stackblitz  
Change Theme:

Link templates are rendered instead of the default item links and represent the entire content of an item.

To set a template for specific items, either:

To set a link template for all Menu items, nest an <ng-template> tag with the kendoMenuItemLinkTemplate directive in the <kendo-menu> component.

When you use the link template, the text, url, icon, and template options of the items are not automatically rendered.

Example
View Source
Edit In Stackblitz  
Change Theme:

Content Template

Content templates are rendered in place of the items children.

Setting the Content Template

To set a content template, nest an <ng-template> tag with the kendoMenuItemContentTemplate directive in a <kendo-menu-item> component. To set a content template in data-binding scenarios, assign the contentTemplate field of the items.

The following example demonstrates how to set the content template for Manu items.

Example
View Source
Edit In Stackblitz  
Change Theme:

Using Components with Popups

If a component that is rendered inside the content utilizes a popup that is rendered outside the content, the Menu closes the item as soon as the user hovers over the popup. Even if the popup is rendered inside the content, it may still overflow, which will cause the mouse to leave the Menu when the popup is closed. To avoid this behavior, prevent the close event for items with content or specific item, and provide, for example, a button to close the item.

Example
View Source
Edit In Stackblitz  
Change Theme: