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.
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.
Link Template
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, nest the link template in the <kendo-menu-item> component.
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, andtemplateoptions of the items are not automatically rendered.
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 Menu items.
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.