All Components

Opening and Closing

By default, the Menu opens and closes the items which contain children on mouseenter and mouseleave with a small delay.

To customize its opening and closing behavior, utilize the following options:

Delay on Hover

To prevent the accidental opening or closing of the Menu items, the component waits for 100 milliseconds before performing the action. To change the default delay on hover, use the hoverDelay property.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-menu [items]="items" [hoverDelay]="1000">
        </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);

Opening on Click

By default, the Menu items open on hover. To specify that the items have to open on click instead of on hover, use the openOnClick property.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-menu [items]="items" [openOnClick]="true">
        </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);

After the user opens and item with a click, all Menu items open on hover until one of them is selected. To configure this behavior, use the openOnClick.toggle option.

Besides the default "select" value, you can also specify:

  • "leave"—The items open on hover until either an item is selected, or the mouse pointer leaves the Menu and the predefined delay passes.
  • "click"—The items open on hover but do not close when the mouse pointer leaves the Menu. To close the items and avoid opening the Menu on hover, the user has to click a random place on the page.

The following example demonstrates the behavior of the Menu when toggle is set to "leave".

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-menu [items]="items" [openOnClick]="{ toggle: 'leave' }">
        </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);

The following example demonstrates the behavior of the Menu when toggle is set to "click".

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-menu [items]="items" [openOnClick]="{ toggle: 'click' }">
        </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);

In this article