Items
Menu items support various configuration options that allow you to customize their appearance, behavior, and content.
The items can be configured either declaratively using the MenuItemComponent properties or programmatically using an array of MenuItem objects (refer to Data Binding section for more details).
Setting Text
You can set the text of the Menu items by using the text input of the MenuItem component.
Setting Descriptions
To display a secondary text below the main item label, you can use the description property.
The Menu does not automatically display descriptions when an item template or link template replaces the default content. Include item.description in the custom template if needed.
The following example adds descriptions to an order workspace's nested menus for order details, domestic and international shipping, pickup, and documents.
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.
Displaying Icons
Depending on the configuration of the project, you can enhance the content of the Menu 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 fromfonttosvg. Set thesvgIconproperty, or Continue Using Font Icons.
Displaying SVG Icons
To display an SVG icon in the items of the Menu, select one from the list of SVG icons supported by Kendo UI for Angular, and set the svgIcon 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.
Displaying Font Icons
To display a font icon inside the items of the Menu:
- Use the
ICON_SETTINGStoken of the Icons package and set the icon type tofont. For more information, go to the topic abouticon settings. - Set the
iconproperty 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.
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.
The following example defines a separator directly in the Menu markup.
For flat data, set the separatorField input to the name of the field that marks separator items. For hierarchical data, use the corresponding separatorField input of the hierarchy binding directive.
The following example shows separators in both flat and hierarchical Menu data. Open each menu to see its separator.
Defining Group Headers
To display a non-interactive label above related items in the Menu, add a Menu item and set the groupHeader property to true. The following snippet places a group header and its related items as siblings inside the Sales submenu.
<kendo-menu>
<kendo-menu-item text="Sales">
<kendo-menu-item text="Revenue reports" [groupHeader]="true"></kendo-menu-item>
<kendo-menu-item text="Daily revenue"></kendo-menu-item>
<kendo-menu-item text="Monthly revenue"></kendo-menu-item>
</kendo-menu-item>
</kendo-menu>To further customize the content of the group headers, use a group header template.
The following example organizes a commerce dashboard's sales, inventory, and fulfillment reports with group headers and nested submenus.
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.
Disabling Items
You can specify that a Menu item is disabled by using the disabled input of the MenuItem component.
Using 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.
You can also define item actions templates for trailing content and group header templates for group labels.