All Components

Templates

The Menu enables you to customize the items or their content by using templates.

Item Template

To set a template for all Menu items, add an <ng-template> tag with the kendoMenuItemTemplate directive inside the Menu component.

The following example demonstrates how to display an icon next to the text of a Menu item.

import { Component } from '@angular/core';
import { files } from './files';

const is = (fileName: string, ext: string) => new RegExp(`.${ext}\$`).test(fileName);

@Component({
   selector: 'my-app',
   template: `
       <kendo-menu [items]="items">
            <ng-template kendoMenuItemTemplate let-item="item">
                <span [ngClass]="iconClass(item)"></span>
                {{item.text}}
            </ng-template>
       </kendo-menu>
   `
})
export class AppComponent {
   public items: any[] = files;

   public iconClass({ text, items }: any): any {
       return {
           'k-i-file-pdf': is(text, 'pdf'),
           'k-i-folder': items !== undefined,
           'k-i-html': is(text, 'html'),
           'k-i-image': is(text, 'jpg|png'),
           'k-icon': true
       };
   }
}

export const files: any[] = [{
    text: 'My Documents',
    items: [
        {
            text: 'Kendo UI Project',
            items: [
                { text: 'about.html' },
                { text: 'index.html' },
                { text: 'logo.png' }
            ]
        },
        {
            text: 'New Web Site',
            items: [
                { text: 'mockup.jpg' },
                { text: 'Research.pdf' }
            ]
        },
        {
            text: 'Reports',
            items: [
                { text: 'February.pdf' },
                { text: 'March.pdf' },
                { text: 'April.pdf' }
            ]
        }
    ]
}];
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MenuModule } from '@progress/kendo-angular-menu';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, MenuModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

To set a template for specific items, nest the template in a <kendo-menu-item> component or set the template field of the item.

The following example demonstrates how to set templates to the items.

import { Component, ViewChild, TemplateRef, OnInit } from '@angular/core';
import { files } from './files';

@Component({
   selector: 'my-app',
   template: `
       <kendo-menu [items]="items">
       </kendo-menu>

       <ng-template let-item="item" #folder>
            <span class="k-icon k-i-folder"></span>
            {{item.text}}
       </ng-template>
   `
})
export class AppComponent implements OnInit {
    public items: any[] = files;

    @ViewChild('folder')
    public folderTemplate: TemplateRef<any>;

    public ngOnInit(): void {
        const template = this.folderTemplate;

        this.items[0].template = template;
    }
}

export const files: any[] = [{
    text: 'My Documents',
    items: [
        {
            text: 'Kendo UI Project',
            items: [
                { text: 'about.html' },
                { text: 'index.html' },
                { text: 'logo.png' }
            ]
        },
        {
            text: 'New Web Site',
            items: [
                { text: 'mockup.jpg' },
                { text: 'Research.pdf' }
            ]
        },
        {
            text: 'Reports',
            items: [
                { text: 'February.pdf' },
                { text: 'March.pdf' },
                { text: 'April.pdf' }
            ]
        }
    ]
}];
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MenuModule } from '@progress/kendo-angular-menu';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, MenuModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Link templates are rendered instead of the default item links and represent the entire content of an item.

To set a template for specific items, either:

To set a link template for all Menu items, nest an <ng-template> tag with the kendoMenuItemLinkTemplate directive in the <kendo-menu> component.

When you use the link template, the text, url, icon, and template options of the items are not automatically rendered.

import { Component } from '@angular/core';
import { items } from './items';

@Component({
   selector: 'my-app',
   template: `
       <kendo-menu [items]="items">
            <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>
   `
})
export class AppComponent {
   public items: any[] = items;
}

export const items: any[] = [{
    text: 'Item1',
    items: [{ text: 'Item1.1' }, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }]
}, {
    text: 'Item2',
    items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
}, {
    text: 'Item3'
}];
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MenuModule } from '@progress/kendo-angular-menu';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, MenuModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Content Template

Content templates are rendered in place of the items children.

Setting the Content Template

To set a content template, nest an <ng-template> tag with the kendoMenuItemContentTemplate directive in a <kendo-menu-item> component. To set a content template in data-binding scenarios, assign the contentTemplate field of the items.

The following example demonstrates how to set the content template for Manu items.

import { Component, ViewChild, TemplateRef, OnInit } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `
       <kendo-menu [items]="items">
       </kendo-menu>

       <ng-template let-item="item" #list>
            <div style="padding: 10px;">
                <div *ngFor="let child of item.items">{{ child.text }}</div>
            </div>
       </ng-template>
   `
})
export class AppComponent implements OnInit {
    public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }, { text: 'item1.2' }] }];

    @ViewChild('list')
    public listTemplate: TemplateRef<any>;

    public ngOnInit(): void {
        const template = this.listTemplate;

        this.items[0].contentTemplate = template;
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MenuModule } from '@progress/kendo-angular-menu';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, MenuModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Using Components with Popups

If a component that is rendered inside the content utilizes a popup that is rendered outside the content, the Menu closes the item as soon as the user hovers over the popup. Even if the popup is rendered inside the content, it may still overflow, which will cause the mouse to leave the Menu when the popup is closed. To avoid this behavior, prevent the close event for items with content or specific item, and provide, for example, a button to close the item.

import { Component } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `
       <kendo-menu (close)="onClose($event)" #menu>
            <kendo-menu-item text="Item">
                <ng-template kendoMenuItemContentTemplate let-index="index">
                    <div style="padding: 10px;">
                        <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
                        <br />
                        <button type="button" class="k-button" (click)="menu.toggle(false, index)">Close</button>
                    </div>
                </ng-template>
            </kendo-menu-item>
       </kendo-menu>
   `
})
export class AppComponent {
    public listItems: Array<string> = [
        'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
        'Football', 'Table Tennis', 'Tennis', 'Volleyball'
    ];

    public onClose(e: any): void {
       if (e.item.contentTemplate) {
           e.preventDefault();
       }
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MenuModule } from '@progress/kendo-angular-menu';
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, MenuModule, DropDownListModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article