Menu Overview
The Kendo UI Menu widget displays hierarchical data as a multi-level menu. It provides 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 through the configuration options. Kendo UI Menu API can be used to add and remove items.
Getting Started
Initialize the Menu
The Kendo UI Menu widget can be initialized in two ways:
- Through HTML markup
- Through a JSON data object
Important
As the Menu has to be initialized after the DOM is fully loaded, make sure you create the widget within a
$(document).ready()statement.
Using HTML Markup
The example below demonstrates how to initialize the Menu by using HTML markup.
Example
<ul id="menu">
<li>Normal Item
<ul>
<li><span class="k-sprite icon-class"></span>Item with a Sprite</li>
<li><img src="Icons/contacts.gif" />Item with an Icon</li>
</ul>
</li>
<li><a href="http://www.google.com">Navigation Item</a></li>
<li class="k-state-active">Active Item</li>
<li>Template Item
<div class="k-group k-content">
Test button - <a class="k-button">Button</a>
</div>
</li>
</ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</script>
Using JSON Data Object
The example below demonstrates how to initialize the Menu by using a JSON data object
By initializing the Menu using JSON, you can use assign a select handler for each item by assigning a function to the select property.
Example
<ul id="menu"></ul>
<script>
$(document).ready(function () {
$("#menu").kendoMenu({
dataSource: [{
text: "Item 1",
cssClass: "myClass", // (Optional) Add custom CSS class to the item, added 2012 Q3 SP1
url: "http://www.telerik.com" // (Optional) Link URL if navigation is needed
},
{
text: "<b>Item 2</b>",
encoded: false, // Allows the use of HTML for item text
content: "text" // Content within an item
},
{
text: "Item 3",
imageUrl: "http://www.telerik.com/test.jpg", // (Optional) Item image URL
items: [{ // Sub-item collection
text: "Sub Item 1"
},
{
text: "Sub Item 2"
}]
},
{
text: "Item 4",
spriteCssClass: "imageClass3" // (Optional) Item image sprite CSS class
},
{
text: "Item 5"
}],
select: function (e) { // Item select event handler, optional
// e.sender - returns reference to the Kendo Menu widget
// e.target - returns the clicked element. Typically, the span.k-link element.
// handle event
}
})
});
</script>
Data Binding
Using Kendo HierarchicalDataSource is available as of the R2 2019 release.
To Local Arrays
The following example demonstrates how to create a Menu and bind it to a local data source.
Example
<ul id="menu"></ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [
{
text: "Item 1",
expanded: true,
items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" }
]
})
});
</script>
To Remote Services
The following example demonstrates how to create a Menu and bind it to a remote HierarchicalDataSource.
Example
<ul id="menu"></ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataTextField: "FullName",
dataSource: {
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
}
})
});
</script>
For a complete reference on how to bind the PanelBar to different service end-points, refer to the API documentation on HierarchicalDataSource.
Sample Case
The example below demonstrates the basic approach to build a Menu by using HTML markup.
Example
<ul id="MenuID">
<li>root item 1</li>
<liroot item 2
<ul>
<li>child item 1</li>
<li>child item 2</li>
</ul>
</li>
<li>root item 3
<ul>
<li>
<div>Menu template content</div>
</li>
</ul>
</li>
</ul>
To create a Kendo UI Menu based on the example above, elaborate on the DOM elements in the way demonstrated by the code below.
Example
<ul id="MenuID" class="k-widget k-menu">
<li class="k-item k-state-default"><span class="k-link">root item 1</span></li>
<li class="k-item k-state-default">
<span class="k-link">root item 2
<span class="k-icon k-i-arrow-s"></span>
</span>
<ul class="k-group k-menu-group">
<li class="k-item k-state-default"><span class="k-link">child item 1</span></li>
<li class="k-item k-state-default"><span class="k-link">child item 2</span></li>
</ul>
</li>
<li class="k-item k-state-default">
<span class="k-link">root item 3
<span class="k-icon k-i-arrow-s"></span>
</span>
<ul class="k-group k-menu-group">
<li class="k-item k-state-default">
<div>Menu template content</div>
</li>
</ul>
</li>
</ul>
The basic emphasis is on the following changes:
- All
<ul>and<li>elements receive some of the Kendo UI CSS classes. - Each menu item text is wrapped in a
span.k-linkelement, ora.k-linkelement, if a navigation URL is specified. - A dropdown arrow (
<span class="k-icon k-i-arrow-s"></span>) is appended to the.k-linkelement of each expandable menu item.
Once a menu group is opened, the ul.k-group element is wrapped by a div.k-animation-container and the DOM structure is transformed in the way demonstrated below.
Example
<li class="k-item k-state-default">
<span class="k-link">root item 2
<span class="k-icon k-i-arrow-s"></span>
</span>
<div class="k-animation-container">
<ul class="k-group k-menu-group">
<li class="k-item k-state-default"><span class="k-link">child item 1</span></li>
<li class="k-item k-state-default"><span class="k-link">child item 2</span></li>
</ul>
</div>
</li>
Configuration
Menu Animations
By default, the Menu uses a slide animation to expand sub-items on a mouse hover event. Animations, along with the animation style and delay, can be customized by using configuration properties. You can also configure Menu items to open on click instead of on hover.
The example below demonstrates how to change Menu animation and open behavior.
Example
<ul id="menu"></ul>
<script>
$("#menu").kendoMenu({
animation: {
open: { effects: "fadeIn" },
duration: 500
},
openOnClick: true
});
</script>
Dynamic Items
The Kendo UI Menu API provides methods for dynamically adding or removing Menu items.
To add items, provide the new item as a JSON object along with a reference item. A reference item is a target Menu item HTML element that already exists in the Menu. The reference item will be used to determine the placement in the hierarchy of the new item. Any valid jQuery selector can be used to obtain a reference to the target item.
For more information on configuring Menu items, see the Menu API demos.
The example below demonstrates how to add a new root Menu item.
Example
<ul id="menu"></ul>
<script>
var menu = $("#menu").kendoMenu().data("kendoMenu");
menu.insertAfter(
{ text: "New Menu Item" },
menu.element.children("li:last")
);
</script>
Display
Shrink Menu to Exactly Fit Root Items
The Menu renders as a <ul> element and expands horizontally by default. If a horizontal Menu is wider than the total width of its root items, a blank space will remain visible on the right. To remove this space, use the CSS rules in the example below.
Example
#menu-id /* for a specific menu instance */
,
.k-menu-horizontal /* for all horizontal menus */
{
display: inline-block;
}
In left-to-right layouts, shrinking the horizontal Menu will make the border of the last root item touch the right border of the Menu. The last item border can be removed as shown int he example below.
Example
#menu-id > .k-last /* for a specific menu instance */
,
.k-menu-horizontal > .k-last /* for all horizontal menus */
{
border-width: 0;
}
Keyboard Navigation
The Menu provides a keyboard navigation functionality. When on focus, the first root item is activated.
Kendo UI Menu supports the following keyboard shortcuts and user actions:
| SHORTCUT | DESCRIPTION |
|---|---|
Home |
Focuses the first item |
End |
Focuses the last item |
Left Arrow key |
|
Right Arrow key |
|
Up Arrow key |
Moves the active item of vertical Menu item groups upwards |
Down Arrow key |
|
Enter |
Selects or navigates the focused item |
Space |
Selects or navigates the focused item |
Esc |
Closes an item group |
(Shift+) Tab
|
Blurs the Menu and moves the focus to the next (previous) focusable page element |