Components / Menus / ContextMenu

Keyboard Navigation

The keyboard navigation of the ContextMenu is always available.

The Menu supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Shift+F10 When applied to a target, the command opens the ContextMenu.
Down Arrow Focuses the first ContextMenu item.
Left Arrow Focuses the last ContextMenu item.
Right Arrow Focuses the first ContextMenu item.
Up Arrow Focuses the last ContextMenu item.
Escape Closes the ContextMenu and returns the focus to the target. 
import { Component } from '@angular/core';
import { items } from './items';

@Component({
    selector: 'my-app',
    template: `
        <ul #target style="display:inline-block;">
            <li *ngFor="let item of data;" tabindex="0" style="list-style:none;">{{ item.text }}</li>
        </ul>
        <kendo-contextmenu [target]="target" filter="li" [items]="items">
        </kendo-contextmenu>
    `
})
export class AppComponent {
    public items: any[] = items;

    public data: any[] = [{ text: 'Target 1' }, { text: 'Target 2' }, { text: 'Target 3' }];
}

export const items: any[] = [{
    text: 'Item1',
    items: [{ text: 'Item1.1' }, { text: 'Item1.2' }]
}, {
    text: 'Item2'
}, {
    text: 'Item3'
}];

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ContextMenuModule } from '@progress/kendo-angular-menu';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule ],
  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