Navigate Through Pages using Menu Component

Environment

Product Version	2025.1.227
Product	Menu for Progress® Telerik® UI for ASP.NET Core

Description

How can I configure the Telerik UI for Telerik UI for ASP.NET Core Menu to navigate through different pages of my application?

Solution

The Menu component renders anchor elements (<a>) by default.

To navigate to the application pages, configure each item using the Url() or Action() methods.

Index.cshtml

    @(Html.Kendo().Menu()
        .Name("menu")
        .Items(menu =>
        {
            menu.Add().Text("Home").Url(Url.Action("Index", "Home"));
            menu.Add().Text("About").Url(Url.Action("About", "Home"));
            menu.Add().Text("Contact").Url(Url.Action("Contact", "Home"));
        })
    )

Razor

    @addTagHelper *, Kendo.Mvc

    <kendo-menu name="menu">
        <items>
            <menu-item text="Home" url="@Url.Action("Index", "Home")"></menu-item>
            <menu-item text="About" url="@Url.Action("About", "Home")"></menu-item>
            <menu-item text="Contact" url="@Url.Action("Contact", "Home")"></menu-item>
        </items>
    </kendo-menu>

C#

    public class HomeController : Controller
    { 
        public IActionResult Index()
        {
            return View();
        }
    
        public IActionResult About()
        {
            return View();
        }
    
        public IActionResult Contact()
        {
            return View();
        }
    }

More ASP.NET Core Menu Resources

• ASP.NET Core Menu Documentation

• ASP.NET Core Menu Demos

• ASP.NET Core Menu Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Menu for ASP.NET Core

• Server-Side API Reference of the Menu for ASP.NET Core

• Server-Side TagHelper API Reference of the Menu for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base