The Menu widget displays hierarchical data as a multi-level menu. Menus provide rich styling for unordered lists of items, and can be used for both navigation and executing JavaScript commands. Items can be defined and initialized from HTML, or the rich Menu API can be used to add and remove items.

Getting Started

<ul id="menu">
    <li>Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

var menu = $("#menu").kendoMenu();

Customizing Menu Animations

By default, the Menu uses a slide animation to expand and reveal sub-items as the mouse hovers. Animations can be easily customized using configuration properties, changing the animation style and delay. Menu items can also be configured to open on click instead of on hover.

$("#menu").kendoMenu({
     animation: {
       open : {effects: fadeIn},
       hoverDelay: 500
     },
     openOnClick: true
 });

Dynamically configuring Menu items

The Menu API provides several methods for dynamically adding or removing Items. To add items, provide the new item as a JSON object along with a reference item that will be used to determine the placement in the hierarchy.

A reference item is simply a target Menu Item HTML element that already exists in the Menu. Any valid jQuery selector can be used to obtain a reference to the target item. For examples, see the Menu API demos. Removing an item only requires a reference to the target element that should be removed.

 var menu = $("#menu").kendoMenu().data("kendoMenu");
 menu.insertAfter(
     { text: "New Menu Item" },
     menu.element.children("li:last")
 );