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.
Configuration
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
Text
You can set the text of the Menu items by using the text input of the MenuItem component.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="Item1">
<kendo-menu-item text="Item1.1">
</kendo-menu-item>
<kendo-menu-item text="Item1.2">
</kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="Item2">
</kendo-menu-item>
</kendo-menu>
`
})
class AppComponent {
}URL
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.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="Item1">
<kendo-menu-item text="Item1.1" url="https://www.example.com/?item=1.1">
</kendo-menu-item>
<kendo-menu-item text="Item1.2" url="https://www.example.com/?item=1.2">
</kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="Item2" url="https://www.example.com/?item=2">
</kendo-menu-item>
</kendo-menu>
`
})
class AppComponent {
}Icon
You can specify the name of a font icon that will be rendered for the item by using the icon input of the MenuItem component.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="My Web Site" icon="folder">
<kendo-menu-item text="images" icon="folder">
<kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
<kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
<kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="resources" icon="folder">
<kendo-menu-item text="pdf" icon="folder">
<kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
<kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
<kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
<kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
<kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
</kendo-menu-item>
</kendo-menu>
`
})
class AppComponent {
}Styles and Classes
You can set styles and classes to the items by using the cssStyle and cssClass inputs of the MenuItem component. The supported values are the same as ngStyle and ngClass support.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="Item1" [cssClass]="'active'">
</kendo-menu-item>
<kendo-menu-item text="Item1" [cssStyle]="{ backgroundColor: '#d3d3d3' }">
</kendo-menu-item>
</kendo-menu>
`,
styles: [`
.active {
box-shadow: inset 0 0 3px 1px #ff6358;
}
`],
encapsulation: ViewEncapsulation.None
})
class AppComponent {
}Disabled State
You can specify that a Menu item is disabled by using the disabled input of the MenuItem component.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="Item1" [disabled]="true">
<kendo-menu-item text="Item1.1">
</kendo-menu-item>
<kendo-menu-item text="Item1.2">
</kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="Item2" [disabled]="true">
</kendo-menu-item>
</kendo-menu>
`
})
class AppComponent {
}Separator Items
You can specify that an item will be rendered as separating other items by using the separator input of the MenuItem component.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="Item1 Group1">
</kendo-menu-item>
<kendo-menu-item text="Item2 Group1">
</kendo-menu-item>
<kendo-menu-item [separator]="true">
</kendo-menu-item>
<kendo-menu-item text="Item1 Group2">
</kendo-menu-item>
</kendo-menu>
`
})
class AppComponent {
}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.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-menu>
<kendo-menu-item text="Item1" >
<ng-template kendoMenuItemTemplate let-item="item" let-index="index">
<div style="padding: 10px;">
My Template for: {{ item.text }} at index: {{ index }}
</div>
</ng-template>
<ng-template kendoMenuItemContentTemplate let-item="item" let-index="index">
<div style="padding: 10px;">
My Content Template for: {{ item.text }} at index: {{ index }}
</div>
</ng-template>
</kendo-menu-item>
<kendo-menu-item text="Item2">
<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 {
}