Popup Appearance

Updated on Dec 17, 2025

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

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.

Popup Container

Control where the popup renders in the DOM using the appendTo property.

The following example demonstrates how to customize the Menu popup appearance by configuring the animation settings and applying custom CSS classes.

Change Theme

Theme

Loading ...

Popup Settings

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-menu [items]="items" [popupSettings]="popupSettings">
</kendo-menu>

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

Use the animate property to configure how the animation of the Menu popup when opening and closing. Set animate to false to disable 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.

ts

public animationSettings: MenuAnimation = {
    type: 'expand',
    duration: 200
};

Popup Container

By default, the Menu popup renders at the root level of the application. Use the appendTo property of the Menu 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-menu [items]="items" [appendTo]="popupContainer"></kendo-menu>
<div #popupContainer></div>

TS

@ViewChild('popupContainer', { read: ViewContainerRef })
public popupContainer: ViewContainerRef;

Suggested Links

• Menu Appearance
• ContextMenu Popup Appearance
• API Reference of PopupSettings
• API Reference of MenuAnimation
• API Reference of the Menu