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.
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 {
}