How to Heighligt Active Menu in MVC 5 Razor

Templates also provide the default tab menus (“Home” and “About”) and pretty nice CSS styles. If you look at the “Site.css” file, you can find the “ul#menu li.selected a” section, which styles the selected menu item. But the application template does not set the “selected” class to the selected menu item.

In this post, I will show you how to do this using the custom “Html Helper” method.

1. _Layout.cshtml

Menu items are defined in the layout file.

1 2 3 4 5 6

<nav>   <ul id="menu">     <li>@Html.ActionLink("Home", "Index", "Home")</li>     <li>@Html.ActionLink("About", "About", "Home")</li>   </ul> </nav>

2. Site.css

The default style of the selected menu is like this:

1 2 3 4

ul#menu li.selected a {   background-color: #034af3;   color: #e8eef4; }

The style expects that the selected menu item has the “selected” class.

3. Creating Html Helper Method

• Create a “HtmlHelpers” folder in your project
• Create a static class
• Define a static method with the first parameter “this HtmlHelper helper“

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

using System; using System.Collections.Generic; using System.Web; using System.Web.Mvc; namespace MyWebApp.WebUI.HtmlHelpers {   public static class HtmlHelperExtensions   {     public static string ActivePage(this HtmlHelper helper, string controller, string action)     {       string classValue = "";       string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();       string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();       if (currentController == controller && currentAction == action)       {         classValue = "selected";       }       return classValue;     }   } }

4. Referring the Html Helper Method in a View

To refer to the helper method in a view, you need to include the namespace with the “using” statement

1	@using MyWebApp.WebUI.HtmlHelpers

Or you can modify the “Web.config” file in the “Views” folder. (Note that it is not the root config file.)

1 2 3 4 5 6 7 8 9

<system.web.webPages.razor>   <host ... />   <pages pageBaseType="System.Web.Mvc.WebViewPage">     <namespaces>       ...       <add namespace="MyWebApp.WebUI.HtmlHelpers" />     </namespaces>   </pages> </system.web.webPages.razor>

5. Modifying the View

Let’s change the menu.

1 2 3 4 5 6

<nav>   <ul id="menu">     <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>     <li class="@Html.ActivePage("Home", "About")">@Html.ActionLink("About", "About", "Home")</li>   </ul> </nav>

If you want to add the “selected” class directly to the <a> element rather than <ul>element, you can do like this:

1 2 3 4 5 6

<nav>   <ul id="menu">     <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = Html.ActivePage("Home", "Index") })</li>     <li>@Html.ActionLink("About", "About", "Home", null, new { @class = Html.ActivePage("Home", "About") })</li>   </ul> </nav>