MenuItemComponent
A component that can be used to specify the Menu items (more information and examples).
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="item1">
<kendo-menu-item text="item1.1" url="https://example.com">
</kendo-menu-item>
<kendo-menu-item text="item1.2" [disabled]="true">
</kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="item2">
<ng-template kendoMenuItemContentTemplate let-item="item">
<div style="padding: 10px;">
My Content Template: {{ item.text }}
</div>
</ng-template>
<ng-template kendoMenuItemTemplate let-item="item">
<div style="padding: 10px;">
My Template: {{ item.text }}
</div>
</ng-template>
</kendo-menu-item>
<kendo-menu-item text="item3">
<ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
<span [kendoMenuItemLink]="index">
{{ item.text }}
<span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
</span>
</ng-template>
</kendo-menu-item>
</kendo-menu>
`
})
class AppComponent {
}
Selector
kendo-menu-item
Inputs
Name | Type | Default | Description |
---|---|---|---|
cssClass |
|
The CSS classes that will be rendered on the item element (see example).
Supports the type of values that are supported by | |
cssStyle |
|
The CSS styles that will be rendered on the item element (see example).
Supports the type of values that are supported by | |
data |
|
Represents the additional data that is associated with the Menu item. | |
disabled |
|
Specifies if the item is disabled (see example). | |
icon |
|
Specifies the name of the font icon that will be rendered for the item (see example). | |
separator |
|
Specifies if this is a separator item.
If set to true only the | |
svgIcon |
|
Defines an | |
text |
|
Specifies the item text (see example). | |
url |
|
Specifies a URL which is rendered as a |