Angular Menus ContextMenu Popup Appearance

New to Kendo UI for Angular? Start a free 30-day trial

Updated on Dec 17, 2025

The Kendo UI for Angular ContextMenu provides flexible options to customize the appearance and behavior of the popup element that appears when opening the ContextMenu.

Popup Settings

Apply custom CSS classes and set margins on the popup using the popupSettings property.

Animation

Configure the type and duration of the animation when the popup opens and closes.

Alignment and Collision

Control the popup and anchor alignment and configure collision behavior.

The following example demonstrates how to customize the ContextMenu popup appearance by configuring alignment, collision behavior, animation settings, and applying custom CSS classes.

Change Theme

Theme

Loading ...

Use the popupSettings property to customize the styling and spacing of the popup. The property accepts a PopupSettings object with the following options:

popupClass—Specifies the CSS classes to apply to the popup container. Use this option to apply custom styles like borders, shadows, or background colors.
margin—Sets the horizontal and vertical margin value in pixels, adding space between the popup and the anchor element.

HTML
<kendo-contextmenu [target]="target" [items]="items" [popupSettings]="popupSettings">
</kendo-contextmenu>
TS
public popupSettings: PopupSettings = {
    popupClass: 'custom-popup',
    margin: { horizontal: 0, vertical: 4 }
};
CSS
.custom-popup {
    border-left: 3px solid #ff6358;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Animation

The ContextMenu provides two properties to control animations:

popupAnimate—Controls the animation of the main ContextMenu popup.
animate—Controls the animation of submenu popups when child items are opened.

Use the popupAnimate property to configure how the main ContextMenu popup animates when opening. Set it to false to disable animations, or provide a PopupAnimation object to customize the animation behavior.

The PopupAnimation interface provides the following options:

type—The animation type. The default value is slide.
duration—The animation duration in milliseconds. The default value is 100.
direction—The animation direction. Applicable if the type is slide or expand. The default value is down.

HTML
<kendo-contextmenu [popupAnimate]="popupAnimationSettings"></kendo-contextmenu>
TS
public popupAnimationSettings: PopupAnimation = {
    type: 'expand',
    duration: 200,
    direction: 'down'
};

Use the animate property to configure how submenu popups animate when opening. Set it to false to disable submenu animations, or provide a MenuAnimation object to customize the animation behavior.

The MenuAnimation interface provides the following options:

type—The animation type. The default value is slide.
duration—The animation duration in milliseconds. The default value is 100.

HTML
<kendo-contextmenu [animate]="submenuAnimationSettings"></kendo-contextmenu>
TS
public submenuAnimationSettings: MenuAnimation = {
    type: 'expand',
    duration: 200
};

Alignment and Collision

The ContextMenu provides properties to control how the popup aligns with the anchor element and how it behaves when it reaches viewport boundaries.

Use the popupAlign property to specify the pivot point of the popup. This determines which point of the popup aligns with the anchor point.

public popupAlign: Align = { horizontal: 'left', vertical: 'top' };

Anchor Alignment

Use the anchorAlign property to specify the pivot point of the anchor element. This property is applicable when alignToAnchor is set to true.

public anchorAlign: Align = { horizontal: 'left', vertical: 'bottom' };

Collision Behavior

Use the collision property to configure how the popup behaves when it collides with the viewport boundaries. The property accepts a Collision object that controls both horizontal and vertical collision behavior.

The available collision options are:

fit—Moves the popup horizontally or vertically until it fits within the viewport.
flip—Flips the popup to the opposite side of the anchor if it does not fit.

public collision: Collision = { horizontal: 'fit', vertical: 'flip' };

By default, the ContextMenu popup renders at the root level of the application. Use the appendTo property of the ContextMenu component to specify a different container for the popup. This option is useful when you need the popup to render in a specific location in the DOM.

HTML
<kendo-contextmenu [target]="target" [items]="items" [appendTo]="popupContainer"></kendo-contextmenu>
<div #popupContainer></div>
TS
@ViewChild('popupContainer', { read: ViewContainerRef })
public popupContainer: ViewContainerRef;