About design and nearby

How to Add ‘active’ class to menu tab in ASP.NET MVC

Posted: November 10th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | 1 Comment »

Every time you are working on application it’s a must to have the basic functionality to highlight selected menu item. In HTML it’s not a problem to add certain class to the navigation tab to highlight current page menu tab:

  1. <li class="selected"><a href="#">Home</a></li>

In MVC project you can dynamically set the active list item, based on the view that is being called. In other words, when the user is looking at the home page, the following HTML should be created:

  1. <ul>
  2. <li class="selected"><a href="#">Home</a></li>
  3. <li><a href="#">Services</a></li>                                
  4. </ul>

There are two ways to solve the issue even:

1. To do the above, I created MVC HTML helper class, containing method to apply my CSS class according to some conditions (MenuHelper.cs):

  1. using System;
  2. using System.Web.Mvc;
  3. using System.Web.Mvc.Html;
  4.  
  5. namespace YourWebApplication.Helpers
  6. {
  7.     /// <summary>
  8.     ///  Menu current active item helper class.
  9.     /// </summary>
  10.     public static class MenuHelper
  11.     {
  12.         /// <summary>
  13.         /// Determines whether the specified controller is selected.
  14.         /// </summary>
  15.         /// <param name="html">The HTML.</param>
  16.         /// <param name="controller">The controller.</param>
  17.         /// <param name="action">The action.</param>
  18.         /// <returns></returns>
  19.         public static string IsSelected(this HtmlHelper html, string controller = null, string action = null)
  20.         {
  21.             const string cssClass = "selected";
  22.             var currentAction = (string)html.ViewContext.RouteData.Values["action"];
  23.             var currentController = (string)html.ViewContext.RouteData.Values["controller"];
  24.  
  25.             if (String.IsNullOrEmpty(controller))
  26.                 controller = currentController;
  27.  
  28.             if (String.IsNullOrEmpty(action))
  29.                 action = currentAction;
  30.  
  31.             return controller == currentController && action == currentAction ?
  32.                 cssClass : String.Empty;
  33.         }
  34.     }
  35. }


And in the menu HTML should be modified to use the helper while rendering page (_Layout.chtml):

  1. <ul>
  2. <li class="@Html.IsSelected(action: "Index")">@Html.ActionLink(Resources._Layout.NavBar1, "Index", "Home")</li>
  3. <li class="@Html.IsSelected(action: "Services")">@Html.ActionLink(Resources._Layout.NavBar2, "Services", "Home")</li>
  4. </ul>

The last thing is styling this class in CSS:

  1. .selected a {
  2.     color: #75bf40;
  3. }

My project structure:
Highlight selected menu item in ASP.NET MVC

2. All code at the *.cshtml file (_Layout.cshtml in my case)

  1. <ul class="navbar-nav">                      
  2.     <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active nav-item" : "nav-item")">
  3.         @Html.ActionLink("About", "About", "Home", new { area = "" }, new { @class = "nav-link" })
  4.     </li>
  5.     <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active nav-item" : "nav-item")">
  6.         @Html.ActionLink("Contact", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })
  7.     </li>
  8. </ul>

Pretty simple, isn’t it :) ?

Share Button

Check Related Posts:

One Comment on “How to Add ‘active’ class to menu tab in ASP.NET MVC”

  1. 1 utku said at 1:53 pm on February 21st, 2018:
    Reply  |  Quote

    Realy good job :)


Leave a Reply


  • eight × = 24

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now