All Components

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:

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 {
  }
In this article