ASP.NET MVC - Highlight Current Link

Monday, August 27, 2012

In an ASP.NET MVC application, there are many different solutions you might use to highlight the menu item for the current location.

Highlight current item

Here's one - a custom HTML helper for building menu items. The custom helper will detect if the link is a link to the current action, and if so the helper adds an additional CSS class to the link (currentMenuItem).

public static MvcHtmlString MenuLink(
this HtmlHelper helper,
string text, string action, string controller)
{
var routeData = helper.ViewContext.RouteData.Values;
var currentController = routeData["controller"];
var currentAction = routeData["action"];

if(String.Equals(action, currentAction as string,
StringComparison.OrdinalIgnoreCase)
&&
String.Equals(controller, currentController as string,
StringComparison.OrdinalIgnoreCase))

{
return helper.ActionLink(
text,action, controller, null,
new { @class="currentMenuItem"}
);
}
return helper.ActionLink(text, action, controller);
}

Use the helper when building a menu in your Layout view.

<li>@Html.MenuLink("Contact", "Contact", "Home")</li>

And don't forget to add some styles to make the current link appear differently from the other links.

ul#menu li a {
background: none;
color: #999;
padding: 5px;
border-radius: 15px;
text-decoration: none;
}

ul#menu li a.currentMenuItem {
background-color: black;
color: white;
}

Another variant would be for the helper check the current controller name only when deciding to mark a link as current.


Comments
gravatar Nicholas Stein Monday, August 27, 2012
When I added this method to my Helpers class, I was getting a compiler error in my Helpers class. It did not like ActionLink. I resolved it by adding a

using System.Web.Mvc.Html;

Nathan Monday, August 27, 2012
Love these little helpful snippets that you blog about from time to time. Keep them coming!
gravatar Fredi Machado Wednesday, August 29, 2012
Indeed a very helpful snippet. Thanks Scott!
gravatar andrea valla Wednesday, August 29, 2012
I changed the code so it works with twitter bootstrap navbar, thanks for the snippet :)

public static MvcHtmlString MenuLinkBootstrap(
this HtmlHelper helper,
string text, string action, string controller)
{
var routeData = helper.ViewContext.RouteData.Values;
var currentController = routeData["controller"];
var currentAction = routeData["action"];

if (String.Equals(action, currentAction as string,
StringComparison.OrdinalIgnoreCase)
&&
String.Equals(controller, currentController as string,
StringComparison.OrdinalIgnoreCase))
{
return new MvcHtmlString("<li class=\"active\">" + helper.ActionLink(text, action, controller) + "</li>");
}
return new MvcHtmlString("<li>" + helper.ActionLink(text, action, controller) + "</li>");
}
gravatar Domain tools Wednesday, August 29, 2012
Nice and clear! I am going to use this in our project domlia
gravatar Om Prakash Thursday, August 30, 2012
Thanks,
really nice article, please keep continue.....
gravatar Ra Friday, August 31, 2012
Is this snippet will work when you will have Html.Action... call to child action in site master?
gravatar scott Friday, August 31, 2012
@Ra: No, but it would just require a little more code to work. Call a method to find the route data:

var routeData = GetRouteData(helper.ViewContext);

And the method:

private static RouteValueDictionary GetRouteData(ViewContext context)
{
if(context.IsChildAction)
{
return GetRouteData(context.ParentActionViewContext);
}
return context.RouteData.Values;
}

Sorry for the formatting in comments.
gravatar Ra Friday, August 31, 2012
@scott thanks!
gravatar Paulo de Tarso Wednesday, September 5, 2012
Really very nice article.
I'm using in my project...

Please keep continue.....

Thanks
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!