# ASP.NET MVC Menu Overview

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.

* [Demo page for the Menu HtmlHelper](https://demos.telerik.com/aspnet-mvc/menu/index)

## Initializing the Menu

The following example demonstrates how to define the Menu.

```Razor HtmlHelper
@(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("Children's 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");
                    });
            });
    })
)
```

```C# Controller
public class MenuController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}
```

## Basic Configuration

The following example demonstrates the basic configuration of the Menu.

```Razor HtmlHelper
@(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](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/appearance)                 | Customize the Menu appearance with CSS.                                                                                                                                                        |
| [Data Binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/binding/binding-overview) | 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](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/animations)                 | The Menu allows you to define animations for opening and closing its sub-items.                                                                                                                |
| [ContextMenu](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/contextmenu/overview)      | The Menu component supports the creation and implementation of context menus that open on right-click or based on custom events.                                                               |
| [Security Trimming](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/security-trimming)   | The built-in security trimming functionality of the Menu is enabled by default.                                                                                                                |
| [Icons](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/icons)                           | Display icons in the Menu items to enhance the appearance of the component.                                                                                                                    |
| [Events](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/events)                         | Explore the various Menu events that allow you to control what happens when the user interacts with the component.                                                                             |
| [Accessibility](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/accessibility/overview)  | The Menu is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.                                                                                   |

## Next Steps

* [Getting Started with the Menu](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/menu/getting-started)
* [Basic Usage of the Menu HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/menu/index)

## See Also

* [Using the API of the Menu for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/menu/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)