• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Menus / API / MenuItemComponent / 
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

NameTypeDefaultDescription

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.

svgIcon

SVGIcon

Defines an SVGIcon that will be rendered for the item using a KendoSVGIcon component.

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).

In this article

Not finding the help you need?

Contact Support