Opening and Closing
The Kendo UI Menu provides flexible options to customize how its items open and close. By default, items with children open on mouseenter and close on mouseleave with a small delay. This behavior can be adjusted using the following options:
Delay on Hover
To prevent accidental opening or closing of Menu items, the component applies a default delay of 100 milliseconds before performing the action. You can customize this delay using the hoverDelay property.
<kendo-menu [items]="items" [hoverDelay]="200"></kendo-menu>The following example demonstrates how to configure the hover delay:
Opening on Click
By default, Menu items open on hover. To change this behavior and open items on click instead, set the openOnClick property to true.
<kendo-menu [items]="items" [openOnClick]="true"></kendo-menu>The following example demonstrates how to open Menu items on click.
When openOnClick is set to true the user must click to open a Menu item. After an item is opened, all subsequent items open on hover until one is selected. You can further customize this behavior by specifying how items open and close by setting the openOnClick property to an OpenOnClickSettings object.
<kendo-menu [items]="items" [openOnClick]="{ toggle: 'click' }"></kendo-menu>The toggle option allows you to control the opening behavior:
"click"—Items open on hover but do not close when the mouse pointer leaves the Menu. To close the items, the user must click outside the Menu."leave"—Items open on hover until either an item is selected, or the mouse pointer leaves the Menu and the predefined delay passes.
The following example demonstrates the behavior when toggle is set to "leave" or "click".
Toggling Menu Item Manually
You can open or close Menu items programmatically by using the toggle method. This method accepts a boolean value which indicates if the items will be opened or closed and one or more string values which represent the hierarchical indices of the items that will be opened or closed.
public open(): void {
this.menuRef.toggle(true, '0', '0_1');
}The following example demonstrates how to toggle Menu items programmatically.