Items

The Menu items are represented by the menu-item tag helper and render <li> tags inside the Menu root element.

The <menu-item> utilizes different inner tags and attributes to let you configure the Menu items. The menu-item tag helper inherits the AnchorTagHelper class which enables you to utilize the native navigation attributes that come with it.

<kendo-menu name="menu">
    <items>
        <menu-item text="Home" asp-action="Index" asp-controller="Home"></menu-item>
        <menu-item text="Second Page" asp-action="SecondIndex" asp-controller="Home"></menu-item>
    </items>
</kendo-menu>

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(items => {
        items.Add().Text("Home").Action("Index", "Home");
        items.Add().Text("Second Page").Action("SecondIndex", "Home");
    })
)

You can also directly set up a URL that navigates to the desired location.

<kendo-menu name="menu">
    <items>
        <menu-item text="Home" url="/home/index"></menu-item>
    </items>
</kendo-menu>

To create popup menus, configure the items by using the <sub-items> tag of the menu-item.

<kendo-menu name="menu">
    <items>
        <menu-item text="Navigate">
            <sub-items>
                <menu-item text="Home"></menu-item>
                <menu-item text="About"></menu-item>
                <menu-item text="Contact"></menu-item>
            </sub-items>
        </menu-item>
    </items>
</kendo-menu>

@(Html.Kendo().Menu()
        .Name("menu")
        .Items(items =>
        {
            items.Add().Text("Navigate").Items(subitems => {
                subitems.Add().Text("Home");
                subitems.Add().Text("About");
                subitems.Add().Text("Contact");
            });
        })
)

Identical to the Kendo UI Menu helper method, you can customize the Menu items by adding images, icons, custom CSS classes, and DOM attributes.

<kendo-menu name="menu">
    <items>
        <menu-item text="Home" my-attr="value" link-html-attributes='new { link_attr="value" }'></menu-item>
        <menu-item text="About" image-url="path/to/image.png" image-html-attributes='new { img_attr="value" }'></menu-item>
        <menu-item text="Contact" icon-class="k-sprite my-sprite-class"></menu-item>
        <menu-item text="Login" icon="login" ></menu-item>
    </items>
</kendo-menu>

@(Html.Kendo().Menu()
        .Name("menu")
        .Items(items =>
        {
                items.Add().Text("Home")
                        .LinkHtmlAttributes(new { link_attr = "value" })
                        .HtmlAttributes(new { my_attr="value" });

                items.Add().Text("About")
                        .ImageUrl("path/to/image.png")
                        .ImageHtmlAttributes(new { img_attr = "value" });

                items.Add().Text("Contact")
                        .SpriteCssClasses("my-sprite-class");

                // The Kendo UI Menu helper method does not support icons yet.
        })
)

You can also define the popup of each Menu item with HTML syntax by using the <content> tag helper.

<kendo-menu name="menu">
    <items>
        <menu-item text="Locations">
            <content class="locations-menu-content" content-attr="value">
                <div id="template" style="padding: 10px;">
                    <h2>Around the Globe</h2>
                    <ol>
                        <li>United States</li>
                        <li>Europe</li>
                        <li>Canada</li>
                        <li>Australia</li>
                    </ol>
                    <img src='@Url.Content("~/shared/web/menu/map.png")' alt="Stores Around the Globe" />
                    <button class="k-button">See full list</button>
                </div>
            </content>
        </menu-item>
    </items>
</kendo-menu>

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(items =>
    {
            items.Add().Text("Locations")
                    .ContentHtmlAttributes(new { @class= "locations-menu-content", content_attr = "value" })
                    .Content(@<text>
                                <div id="template" style="padding: 10px;">
                                        <h2>Around the Globe</h2>
                                        <ol>
                                                <li>United States</li>
                                                <li>Europe</li>
                                                <li>Canada</li>
                                                <li>Australia</li>
                                        </ol>
                                        <img src='@Url.Content("~/shared/web/menu/map.png")' alt="Stores Around the Globe" />
                                        <button class="k-button">See full list</button>
                                </div>
                        </text>);
            })
)

See Also

• Server-Side API