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

MenuItemComponent

Component

Represents a component that can be used to specify the Menu items (more information and examples).

Definition

Package:@progress/kendo-angular-menu

Selector:kendo-menu-item

Syntax:

html

<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 }}
              @if (item.items && item.items.length) {
                <span [kendoMenuExpandArrow]="index"></span>
              }
          </span>
      </ng-template>
  </kendo-menu-item>
</kendo-menu>

Inputs

cssClass

any

Specifies 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

Specifies 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 (see example).

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