Highlighting Selected Menu Item

Environment

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

Description

How can I highlight the selected menu items when using Telerik UI for ASP.NET Core Menu component?

Solution

The example implementation relies on the following key steps:

1. Create a Menu component with child items.
2. Within the $(document).ready() function, loop through the Menu items elements, and check if the item's href attribute equals the entire URL of the current page. If yes, add a class selected-item to the respective element.
3. Add the desired background color with CSS to the selected-item class and the k-state-highlight class, which indicates the current active Menu item.

_Layout.cshtml

@(Html.Kendo().Menu()
    .Name("Menu")    // Add a name to the Menu component.
    .Items(items =>
    {
        items.Add().Text("Contacts").Action("Contact", "Home")  // The action method is used to link between pages.
        .Items(children =>                                     //  Add child items to the parent Menu items.
        {
            children.Add().Text("Contact child 1").Action("Contact1", "Home");
            children.Add().Text("Contact child 2").Action("Contact2", "Home");
            children.Add().Text("Contact child 3").Action("Contact3", "Home");
        });
        items.Add().Text("About").Action("About", "Home")
        .Items(children =>
        {
            children.Add().Text("About child 1").Action("About1", "Home");
            children.Add().Text("About child 2").Action("About2", "Home");
        });
        items.Add().Text("Home").Action("Index", "Home");
    })
    // IMPORTANT: The jQuery and CSS selectors of the Menu component element must match with the Name() of the Menu.
)

HomeController.cs

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

    public IActionResult About()
    {
        return View();
    }

    public IActionResult About1()
    {
        return View();
    }

    public IActionResult About2()
    {
        return View();
    }

    public IActionResult Contact()
    {
        return View();
    }

    public IActionResult Contact1()
    {
        return View();
    }

    public IActionResult Contact2()
    {
        return View();
    }

    public IActionResult Contact3()
    {
        return View();
    }

    public IActionResult Error()
    {
        return View();
    }
}

JavaScript

<script>
    $(document).ready(function () {
        $.each(
            $("#Menu").find(".k-link"),  // Iterate through the items with class '.k-link'.
            function (i, data) {
                if (data.href == location.href) {                // Check if the 'href' attribute is the same as the current page location 'href'.
                    $(data).parent().addClass("selected-item"); // Add the selected-item class to its parent.
                }
            }
        );
    });
</script>

CSS

<style>
    .selected-item,
    #Menu .k-state-highlight {    
        background-color: red; /* Customize the background color with whatever color you desire */
    }
</style>

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
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base