Items
You can instantiate the Menu items by initializing them as MenuItem
components and use their corresponding properties.
Menu children are represented by nesting the MenuItem
components.
The MenuItem
component provides configuration options for:
- Setting item text
- Setting a URL
- Setting an icon
- Setting styles and classes
- Setting a disabled state
- Creating items as separators
- Customizing content by using templates
Showing Text
You can set the text of the Menu items by using the text
input of the MenuItem
component.
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 fromfont
tosvg
. Set thesvgIcon
property, 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_SETTINGS
token of the Icons package and set the icon type tofont
. For more information, go to the topic abouticon settings
. - 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.
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.
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.
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.