All Components

Keyboard Navigation

The keyboard navigation of the Menu is always available.

The Menu supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow
  • (For root items) Opens the item and focuses the last child.
  • (For child items) Focuses the previous item.
Down Arrow
  • (For root items) Opens the item and focuses the first child.
  • (For child items) Focuses the next item.
Left Arrow
  • (For root items) Focuses the previous item.
  • (For child items) If the parent is opened horizontally, closes and focuses the parent. Otherwise, focuses and opens the previous root item.
Right Arrow
  • (For root items) Focuses the next item.
  • (For child items) If the item has children, opens the item and focuses the first child. Otherwise, focuses and opens the next root item.
Home Focuses the first item.
End Focuses the last item.
Enter Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL.
Space Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL.
Escape (For child items) Closes and focuses the parent.
Alphanumeric character Focuses the next item with text starting with the character.
import { Component } from '@angular/core';
import { items } from './items';

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

If the Menu is vertical, the arrow keys perform the following actions:

SHORTCUT DESCRIPTION
Up Arrow Focuses the previous item.
Down Arrow Focuses the next item.
Left Arrow
  • (For root items) opens the item and focuses the last child.
  • (For child items) closes and focuses the parent.
Right Arrow If the item has children, opens the item and focuses the first child. For child items without children, focuses and opens the next root item.
import { Component } from '@angular/core';
import { items } from './items';

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