Menu

Directive

kendo-menu

Child Components

• kendo-menu-item

Props

animation Boolean | Object

A collection of Animation objects for changing the default animations (animation in Kendo UI for jQuery). If animation is set to false, all animations of the Menu will be disabled. Each animation has a reverse option which, by default, is used for the closing effect but which can be overridden by setting the close animation. Each animation also has a direction which can be set off the animation—for example, slideIn:Down. The supported composite props are available in AnimationProps.

close-on-click Boolean

Specifies that sub-menus will close after the selection of the item is the user is not willing to navigate (closeOnClick in Kendo UI for jQuery).

data-source Object | Array

The data source of the Menu which will be used for rendering its items (dataSource in Kendo UI for jQuery).

The supported values are:

• A JSON object.
• An array that contains an item.
• An array of items.
• An existing kendo.data.HierarchicalDataSource instance.

data-image-url-field String

The field of the data item that provides the image URL of the Menu nodes (dataImageUrlField in Kendo UI for jQuery).

data-sprite-css-class-field String

The field of the data item that provides the sprite CSS class of the nodes (dataSpriteCssClassField in Kendo UI for jQuery). If an array, each level uses the field that is at the same index in the array, or the last item in the array.

data-text-field String | Array

The field of the data item that provides the text content of the nodes (dataTextField in Kendo UI for jQuery). If an array, each level uses the field that is at the same index in the array, or the last item in the array.

data-url-field String

The field of the data item that provides the link URL of the nodes (dataUrlField in Kendo UI for jQuery).

data-content-field String

The field of the data item that provides the content of the nodes (dataContentField in Kendo UI for jQuery).

direction String

Specifies the opening direction of the Menu sub-menus (direction in Kendo UI for jQuery).

The supported value are:

• top
• bottom
• left
• right

hover-delay Number

Specifies the delay (in milliseconds) before the sub-menus are opened or closed which helps to avoid accidental closure on leaving (hoverDelay in Kendo UI for jQuery).

open-on-click Boolean | Object

Specifies that the root sub-menus will be opened on item click (openOnClick in Kendo UI for jQuery). The supported composite props are available in OpenOnClickProps.

orientation String

The orientation of the root menu (orientation in Kendo UI for jQuery).

The supported values are:

• horizontal
• vertical

popup-collision String

Specifies the way the Menu will adjust to screen boundaries (popupCollision in Kendo UI for jQuery).

The supported approaches are:

• (Default) fit—A sub-menu fits with a horizontal parent or the root menu which means that it will move to fit within the screen boundaries in all directions.
• fit flip—A sub-menu with vertical parent will fit vertically and flip over its parent horizontally.

scrollable Boolean | Object

If scrollable is enabled, the Menu displays buttons that scroll the items when they cannot fit the width or the height of the Menu popups (scrollable in Kendo UI for jQuery). By default, scrolling is disabled. The supported composite props are available in ScrollableProps.

Events

close: Function

Fires before a sub-menu or the Menu is closed (close in Kendo UI for jQuery). To prevent the closing of the sub-menu, you can cancel the close event.

open: Function

Fires before a sub-menu or the Menu is opened (open in Kendo UI for jQuery). To prevent the opening of the sub-menu, you can cancel the open event.

activate: Function

Fires when a sub-menu or the Menu is opened and its animation finishes (activate in Kendo UI for jQuery).

deactivate: Function

Fires when a sub-menu or the Menu is closed and its animation finishes (deactivate in Kendo UI for jQuery).

select: Function

Fires when a menu item is selected (select in Kendo UI for jQuery).

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI Menu instance.