• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

ContextMenuComponent

Represents the Kendo UI ContextMenu component for Angular.

@Component({
   selector: 'my-app',
   template: `
   <div #target>
       Right-click to open Context menu</p>
   </div>
   <kendo-contextmenu [target]="target" [items]="items"> </kendo-contextmenu>
   `
})
class AppComponent {
   public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
}

Selector

kendo-contextmenu

Export Name

Accessible in templates as #kendoContextMenuInstance="kendoContextMenu"

Inputs

NameTypeDefaultDescription

alignToAnchor

boolean

false

Indicates that the ContextMenu will be aligned to the target or to the filter element (if specified).

anchorAlign

Align

The possible values are:

  • horizontalleft , center , right
  • verticaltop , center , bottom

Specifies the pivot point of the anchor. Applicable if alignToAnchor is true.

animate

boolean | MenuAnimation

Sets the Menu animation.

appendTo

ViewContainerRef

Defines the container to which the popups will be appended.

ariaLabel

string

Sets the value for the aria-label attribute of the ContextMenu.

collision

Collision

{ horizontal: 'fit', vertical: 'flip' }

Configures the collision behavior of the popup.

filter

string

Specifies a CSS selector which filters the elements in the target for which the ContextMenu will open (see example).

hoverDelay

number

Specifies the delay in milliseconds before the Menu items are opened or closed on item hover or leave (see example). Used to avoid the accidental opening or closing of the items.

items

any[]

Specifies the Menu items.

openOnClick

boolean | OpenOnClickSettings

Specifies that the root items can be opened only on click (see example).

popupAlign

Align

The possible values are:

  • horizontalleft , center , right
  • verticaltop , center , bottom

Specifies the pivot point of the popup.

popupAnimate

boolean | PopupAnimation

true

Specifies the popup animation.

showOn

string

'contextmenu'

Specifies the event on which the ContextMenu will open (see example). Accepts the name of a native DOM event. For example, click, dblclick, mouseover, etc.

size

MenuSize

Sets the Menu size.

The possible values are:

  • small
  • medium (default)
  • large
  • none

target

string | ElementRef<any> | HTMLElement | ContextMenuTargetContainerDirective

Specifies the element for which the ContextMenu will open (see example).

vertical

boolean

true

Specifies if the Menu will be vertically rendered (see example).

Events

NameTypeDescription

close

EventEmitter<ContextMenuEvent>

Fires when a Menu item is closed (see example).

open

EventEmitter<ContextMenuEvent>

Fires when a Menu item is opened (see example).

popupClose

EventEmitter<ContextMenuPopupEvent>

Fires when the Menu is closed (see example).

popupOpen

EventEmitter<ContextMenuPopupEvent>

Fires when the Menu is opened (see example).

select

EventEmitter<ContextMenuSelectEvent>

Fires when a Menu item is selected (see example).

Methods

hide

Hides the ContextMenu.

show

Shows the ContextMenu for the specified target.

Parameters

target

ElementRef<any> | HTMLElement | Offset

The offset or the target element for which the ContextMenu will open.

In this article

Not finding the help you need?