Opening and Closing

By default, the Menu opens and closes the items which contain children on mouseenter and mouseleave with a small delay.

To customize its opening and closing behavior, utilize the following options:

Delay on Hover

To prevent the accidental opening or closing of the Menu items, the component waits for 100 milliseconds before performing the action. To change the default delay on hover, use the hoverDelay property.

Example
View Source
Edit In Stackblitz  
Change Theme:

Opening on Click

By default, the Menu items open on hover. To specify that the items have to open on click instead of on hover, use the openOnClick property.

Example
View Source
Edit In Stackblitz  
Change Theme:

After the user opens an item with a click, all Menu items open on hover until one of them is selected. To configure this behavior, use the openOnClick.toggle option.

Besides the default "select" value, you can also specify:

  • "leave"The items open on hover until either an item is selected, or the mouse pointer leaves the Menu and the predefined delay passes.
  • "click"The items open on hover but do not close when the mouse pointer leaves the Menu. To close the items and avoid opening the Menu on hover, the user has to click a random place on the page.

The following example demonstrates the behavior of the Menu when toggle is set to "leave".

Example
View Source
Edit In Stackblitz  
Change Theme:

The following example demonstrates the behavior of the Menu when toggle is set to "click".

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?