Highlighting Selected Menu Item
Environment
| Product Version | 2023.2.829 |
| Product | Menu for Progress® Telerik® UI for ASP.NET MVC |
Description
How can I highlight the selected menu items when using Telerik UI for ASP.NET MVC Menu component?
Solution
The example implementation relies on the following key steps:
- Create a
Menucomponent with child items. - Within the
$(document).ready()function, loop through the Menu items elements, and check if the item'shrefattribute equals the entire URL of the current page. If yes, add a classselected-itemto the respective element. - Add the desired background color with CSS to the
selected-itemclass and thek-state-highlightclass, which indicates the current active Menu item.
@(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.
)
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();
}
}
<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>
<style>
.selected-item,
#Menu .k-state-highlight {
background-color: red; /* Customize the background color with whatever color you desire */
}
</style>