All Components

Orientation

By default, the ContextMenu items are rendered vertically.

To render the items horizontally, set the vertical property of the ContextMenu to false.

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

@Component({
    selector: 'my-app',
    template: `
        <div #target>
            Target
        </div>
        <kendo-contextmenu [target]="target" [items]="items" [vertical]="false">
        </kendo-contextmenu>
    `
})
export class AppComponent {
    public items: any[] = items;
}
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