ASP.NET MVC Menu Overview
The Menu is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Menu HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Menu widget.
The Menu 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 execution of JavaScript commands.
Initializing the Menu
The following example demonstrates how to define the Menu.
@(Html.Kendo().Menu()
.Name("menu")
.Items(items =>
{
items.Add()
.Text("Products")
.Items(children =>
{
children.Add().Text("Furniture")
.Items(innerChildren =>
{
innerChildren.Add().Text("Tables & Chairs");
innerChildren.Add().Text("Sofas");
innerChildren.Add().Text("Occasional Furniture");
innerChildren.Add().Text("Childerns Furniture");
innerChildren.Add().Text("Beds");
});
children.Add().Text("Decor")
.Items(innerChildren =>
{
innerChildren.Add().Text("Bed Linen");
innerChildren.Add().Text("Throws");
innerChildren.Add().Text("Curtains & Blinds");
innerChildren.Add().Text("Rugs");
innerChildren.Add().Text("Carpets");
});
});
items.Add()
.Text("Stores")
.Items(children =>
{
children.Add().Text("Around the Globe")
.Items(innerChildren =>
{
innerChildren.Add().Text("United States");
innerChildren.Add().Text("Canada");
innerChildren.Add().Text("Europe");
innerChildren.Add().Text("Australia");
});
children.Add().Text("Decor")
.Items(innerChildren =>
{
innerChildren.Add().Text("Bed Linen");
innerChildren.Add().Text("Throws");
innerChildren.Add().Text("Curtains & Blinds");
innerChildren.Add().Text("Rugs");
innerChildren.Add().Text("Carpets");
});
});
})
)
public class MenuController : Controller
{
public ActionResult Index()
{
return View();
}
}
Basic Configuration
The following example demonstrates the basic configuration of the Menu.
@(Html.Kendo().Menu()
.Name("menu")
.Items(items =>
{
items.Add().Text("Item 1")
.ImageUrl(Url.Content("~/Content/shared/icons/sports/baseball.png"))
.Items(children =>
{
children.Add().Text("Top News");
children.Add().Text("Photo Galleries");
children.Add().Separator(true);
children.Add().Text("Videos Records");
children.Add().Text("Radio Records");
});
items.Add().Text("Item 2")
.ImageUrl(Url.Content("~/Content/shared/icons/sports/golf.png"))
.Items(children =>
{
children.Add().Text("Top News");
children.Add().Text("Photo Galleries");
children.Add().Separator(true);
children.Add().Text("Videos Records");
children.Add().Text("Radio Records");
});
items.Add().Text("Item 3")
.ImageUrl(Url.Content("~/Content/shared/icons/sports/swimming.png"))
.Items(children =>
{
children.Add().Text("Top News");
children.Add().Text("Photo Galleries");
});
})
.Animation(animation =>
{
animation.Open(open =>
{
open.Expand(ExpandDirection.Vertical);
});
})
.HoverDelay(500)
.Direction(MenuDirection.Left)
.Orientation(MenuOrientation.Horizontal)
.Events(events => events
.Open("onOpen")
.Close("onClose")
.Select("onSelect")
.Activate("onActivate")
.Deactivate("onDeactivate")
)
)
<script type="text/javascript">
$(function () {
// The Name() of the Menu is used to get its client-side instance.
var menu = $("#menu").data("kendoMenu");
console.log(menu);
});
</script>
Functionality and Features
| Feature | Description |
|---|---|
| Appearance | Customize the Menu appearance with CSS. |
| Data Binding | To bind the Menu to data, you can apply various approaches, for example, binding to a server endpoint, binding to a hierarchical model, or manually defining the properties of the Menu items. |
| Animations | The Menu allows you to define animations for opening and closing its sub-items. |
| ContextMenu | The Menu component supports the creation and implementation of context menus that open on right-click or based on custom events. |
| Security Trimming | The built-in security trimming functionality of the Menu is enabled by default. |
| Events | Explore the various Menu events that allow you to control what happens when the user interacts with the component. |
| Accessibility | The Menu is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. |