New to Kendo UI for Angular? Start a free 30-day trial

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

cssClass

any

The CSS classes that will be rendered on the item element (see example). Supports the type of values that are supported by ngClass.

cssStyle

any

The CSS styles that will be rendered on the item element (see example). Supports the type of values that are supported by ngStyle.

data

any

Represents the additional data that is associated with the Menu item.

disabled

boolean

Specifies if the item is disabled (see example).

icon

string

Specifies the name of the font icon that will be rendered for the item (see example).

separator

boolean

Specifies if this is a separator item. If set to true only the cssClass and cssStyle fields are rendered.

text

string

Specifies the item text (see example).

url

string

Specifies a URL which is rendered as a href attribute on the item link (see example).