How to add "active" class to Html.ActionLink in ASP.NET MVC

Question

I'm trying to add an"active" class to my bootstrap navbar in MVC, but the following doesn't show the active class when written like this:

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

This resolves to what looks like a correctly formatted class, but doesn't work:

<a class="active" href="/">Home</a>

In the Bootstrap documentation it states that 'a' tags shouldn't be used in the navbar, but the above is how I believe is the correct way of adding a class to an Html.ActionLink. Is there another (tidy) way I can do this?

the code that resolves has class = active in it. Isn't that what you say you want in your question? How you have your code is how I add classes — Matt Bodily, Dec 05 '13 at 21:05
you are not too clear!!! I dont exactly understand whats the problem adding it to nav, even though I get a feeling, the way it is should be just fine — JC Lizard, Dec 05 '13 at 21:05
What's the problem with the resolved code? What are you expecting? Can you be more specific than "doesn't seem to work"? Your question isn't clear enough to help you right now. — dom, Dec 05 '13 at 21:07
Edited! sorry, what I meant was that the "active" class isn't showing at all — Gillespie, Dec 05 '13 at 21:10
Just glanced at Bootstrap's docs and I think you need to add the `active` class to the `li` element, not the `a`. See the first example here : http://getbootstrap.com/components/#navbar — dom, Dec 05 '13 at 21:12
Yeah that's how I had it originally, I was just trying to keep my styling uniform throughout my code, so that I can employ a repeatable method of changing the "active" class to the selected nav object. — Gillespie, Dec 05 '13 at 21:21

dom · Accepted Answer · 2018-12-03T19:07:57.913

In Bootstrap the active class needs to be applied to the <li> element and not the <a>. See the first example here: http://getbootstrap.com/components/#navbar

The way you handle your UI style based on what is active or not has nothing to do with ASP.NET MVC's ActionLink helper. This is the proper solution to follow how the Bootstrap framework was built.

<ul class="nav navbar-nav">
    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Edit:

Since you will most likely be reusing your menu on multiple pages, it would be smart to have a way to apply that selected class automatically based on the current page rather than copy the menu multiple times and do it manually.

The easiest way is to simply use the values contained in ViewContext.RouteData, namely the Action and Controller values. We could build on what you currently have with something like this:

<ul class="nav navbar-nav">
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

It's not pretty in code, but it'll get the job done and allow you to extract your menu into a partial view if you like. There are ways to do this in a much cleaner way, but since you're just getting started I'll leave it at that. Best of luck learning ASP.NET MVC!

Late edit:

This question seems to be getting a bit of traffic so I figured I'd throw in a more elegant solution using an HtmlHelper extension.

Edit 03-24-2015: Had to rewrite this method to allow for multiple actions and controllers triggering the selected behavior, as well as handling for when the method is called from a child action partial view, thought I'd share the update!

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

Works with .NET Core:

public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
    string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
    string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

    IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
    IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

Sample usage:

<ul>
    <li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
        <a href="@Url.Action("Home", "Default")">Home</a>
    </li>
    <li class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")">
        <a href="@Url.Action("List", "Default")">List</a>
    </li>
</ul>

Thanks, as I mentioned this is how I had it originally, but I was hoping to have one method throughout my code of changing the "active" class between selected objects. — Gillespie, Dec 05 '13 at 21:29
@Gillespie no worries! I've edited my answer to add some info that might help you a bit more. — dom, Dec 05 '13 at 21:47
Thanks a lot for this, I'll try and figure it out as I get an error regarding being able to apply indexing to the routedata expression, but I'm guessing this is due to me needing to learn more about MVC :) — Gillespie, Dec 05 '13 at 21:55
With regards to the first edit, it actually worked for the Index page only. Seems the reason is that when it was making the comparison, it failed as ViewContext.RouteData.Values["Action"] does not return a String type object (still don't know how it worked for the first page....). When I changed all ViewContext.RouteData.Values["Action"] to ViewContext.RouteData.Values["Action"].toString(), it worked for all pages. Might want to add this in your solution just in case someone experiences the same problem. — user3281466, Oct 14 '14 at 14:45
@PeterH in a static class wherever you feel appropriate, make sure you include the namespace in your View folder's `web.config`. — dom, Jan 23 '15 at 01:58
I had the same problem as user3281466 pointed out in the comment above me. If `ToString()` is added, it'll work for all checks. — QuantumHive, Mar 03 '15 at 17:40
This is entirely broken in ASP.NET 5 MVC 6. The `ViewContext` class seems to be a different one, missing a few members now. — ygoe, Nov 20 '15 at 15:11
@LonelyPixel maybe [this answer](http://stackoverflow.com/a/27257593/380096) works for you? — dom, Nov 20 '15 at 15:19
I had used last edited codes but done a little changes. Because I don't like to use unnecessary class tag. My extension method returns class=active or empty. With this usage, there is no unnecessary class tag. My usage like this:
@Dom how would you write a unit test to test that HtmlHelper? I tried all sorts and couldn't :( — J86, Jul 13 '16 at 08:41
@Ciwan I'd say that falls outside the scope of this question and answer, probably a good idea to ask a new question on that topic if the search function doesn't turn up anything relevant for you. Good luck! — dom, Jul 13 '16 at 12:02

score 30 · Answer 2 · answered Apr 30 '15 at 13:08

30

Extension:

public static MvcHtmlString LiActionLink(this HtmlHelper html, string text, string action, string controller)
{
    var context = html.ViewContext;
    if (context.Controller.ControllerContext.IsChildAction)
        context = html.ViewContext.ParentActionViewContext;
    var routeValues = context.RouteData.Values;
    var currentAction = routeValues["action"].ToString();
    var currentController = routeValues["controller"].ToString();

    var str = String.Format("<li role=\"presentation\"{0}>{1}</li>",
        currentAction.Equals(action, StringComparison.InvariantCulture) &&
        currentController.Equals(controller, StringComparison.InvariantCulture) ?
        " class=\"active\"" :
        String.Empty, html.ActionLink(text, action, controller).ToHtmlString()
    );
    return new MvcHtmlString(str);
}

Usage:

<ul class="nav navbar-nav">
    @Html.LiActionLink("About", "About", "Home")
    @Html.LiActionLink("Contact", "Contact", "Home")
</ul>

answered Apr 30 '15 at 13:08

Prof

657
8
18

1

This is a beautifully efficient extension. Works perfectly and is quite elegant. Hats off to you, Prof! My only gripe is with the `role="presentation"`, which is not at all appropriate for a primary navigational menu (http://john.foliot.ca/aria-hidden/#pr). An unordered list is very much an appropriate container for a related set of links, as it groups them together in a logical manner. – René Kåbis Apr 28 '16 at 18:29
@René Kåbis it for bootstrap naigation http://getbootstrap.com/components/#nav-tabs – Prof Apr 28 '16 at 23:02
1

This is not working when user manually input the url in small case letter or upper case letter, eg. "http://domain.com/Login" and "http://domain.com/LOGIN". For the solution, `var str = String.Format("
{1}

sky91

Jan 06 '17 at 11:02

score 21 · Answer 3 · answered Jan 22 '16 at 10:39

21

I manged to do this by adding a view bag parameter in asp.net mvc. Here what have i done

Added ViewBag.Current = "Scheduler"; like parameter in each page

In layout page

<ul class="nav navbar-nav">
     <li class="@(ViewBag.Current == "Scheduler" ? "active" : "") "><a href="@Url.Action("Index","Scheduler")" target="_self">Scheduler</a></li>
 </ul>

This solved my problem.

answered Jan 22 '16 at 10:39

Damith

1,982
3
28
42

Simple and easy solution. – japes Sophey Dec 18 '19 at 14:24

score 13 · Answer 4 · edited Dec 13 '19 at 03:11

Easy ASP.NET Core 3.0 and TagHelpers

[HtmlTargetElement("li", Attributes = "active-when")]
public class LiTagHelper : TagHelper
{
    public string ActiveWhen { get; set; }

    [ViewContext]
    [HtmlAttributeNotBound]
    public ViewContext ViewContextData { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (ActiveWhen == null)
            return;

        var targetController = ActiveWhen.Split("/")[1];
        var targetAction = ActiveWhen.Split("/")[2];

        var currentController = ViewContextData.RouteData.Values["controller"].ToString();
        var currentAction = ViewContextData.RouteData.Values["action"].ToString();

        if (currentController.Equals(targetController) && currentAction.Equals(targetAction))
        {
            if (output.Attributes.ContainsName("class"))
            {
                output.Attributes.SetAttribute("class", $"{output.Attributes["class"].Value} active");
            }
            else
            {
                output.Attributes.SetAttribute("class", "active");
            }
        }
    }
}

Include into your _ViewImports.cs:

@addTagHelper *, YourAssemblyName

Usage:

 <li active-when="/Home/Index">

yes that work for me, but have problem with sub-list. I already put that but after page refresh it did not keep expand my list. — Mr.Buntha Khin, May 09 '21 at 19:56
for first level it works fine but second level of ul not work — Mr.Buntha Khin, May 09 '21 at 19:59
Fyi you can replace your if, else and SetAttribute by simply doing: output.MergeAttributes(new TagBuilder("li").AddCssClass("active")); — Finickyflame, Nov 05 '21 at 18:42

score 12 · Answer 5 · answered Oct 26 '16 at 06:43

May be little late. But hope this helps.

public static class Utilities
{
    public static string IsActive(this HtmlHelper html, 
                                  string control,
                                  string action)
    {
        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeControl = (string)routeData.Values["controller"];

        // both must match
        var returnActive = control == routeControl &&
                           action == routeAction;

        return returnActive ? "active" : "";
    }
}

And usage as follow:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class='@Html.IsActive("Home", "Index")'>
            @Html.ActionLink("Home", "Index", "Home")
        </li>
        <li class='@Html.IsActive("Home", "About")'>
            @Html.ActionLink("About", "About", "Home")
        </li>
        <li class='@Html.IsActive("Home", "Contact")'>
            @Html.ActionLink("Contact", "Contact", "Home")
        </li>
    </ul>
</div>

Got reference from http://www.codingeverything.com/2014/05/mvcbootstrapactivenavbar.html

Very simle and elegant solution. I did some improvement here https://gist.github.com/jean-rakotozafy/3508f9999671709523447a74dfd6dfbb to highlight a menu for all controller actions. — Zan RAKOTO, Feb 27 '20 at 03:39

score 7 · Answer 6 · answered Sep 03 '19 at 04:01

ASP.NET Core & Bootstrap 4

Most up-to-date answer

I have re-worked @crush's neat solution for an updated, ASP.NET Core and Bootstrap 4 compatible way to solve this problem based on an IHtmlHelper extension method:

public static class LinkExtensions
{
    public static IHtmlContent ActiveActionLink(this IHtmlHelper html, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        return ActiveActionLink(html, linkText, actionName, controllerName, new RouteValueDictionary(routeValues), HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    }

    public static IHtmlContent ActiveActionLink(this IHtmlHelper html, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes)
    {
        var routeData = html.ViewContext.RouteData;
        var routeAction = (string)routeData.Values["action"];
        var routeController = (string)routeData.Values["controller"];

        var active = controllerName.Equals(routeController) && actionName.Equals(routeAction);

        using (var writer = new StringWriter())
        {
            writer.WriteLine($"<li class='nav-item {(active ? "active" : "")}'>");
            html.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes).WriteTo(writer, HtmlEncoder.Default);
            writer.WriteLine("</li>");
            return new HtmlString(writer.ToString());
        }
    }
}

Usage

<nav class="navbar">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            @Html.ActiveActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })
            @Html.ActiveActionLink("About", "About", "Home", null, new { @class = "nav-link" })
            @Html.ActiveActionLink("Contact", "Contact", "TimeTracking", null, new { @class = "nav-link" })
        </ul>
    </div>
</nav>

Very good solution. In your example, how can i set 'Contact' as active by default? — Md. Suman Kabir, Jan 13 '20 at 16:27
Thank you. The good thing is that you don't need to set an active element. As soon as the 'Contact' page is visited, `ActiveActionLink()` will apply the active class to the `
@Mohammad I do not understand. Could you please elaborate your question? — ˈvɔlə, Jun 22 '20 at 08:11
in the LinkExtensions class you didn't get area from routeData! — Mohammad, Jun 23 '20 at 06:50
If you're going to hard-code the `nav-item` and `active` Bootstrap classes into your helper, you might as well hard-code the `nav-link` class into it as well so that you don't need to specify it every time: `new { @class = "nav-link" }`. — MarredCheese, Sep 03 '20 at 13:05
what if i want to add the active class to an anchor element , your code is specific to li elements — Dimitris Kougioumtzis, Nov 17 '20 at 20:03

score 4 · Answer 7 · answered Aug 07 '16 at 05:26

I know this question is old, but I will just like to add my voice here. I believe it is a good idea to leave the knowledge of whether or not a link is active to the controller of the view.

I would just set a unique value for each view in the controller action. For instance, if I wanted to make the home page link active, I would do something like this:

public ActionResult Index()
{            
    ViewBag.Title = "Home";
    ViewBag.Home = "class = active";
    return View();
}

Then in my view, I will write something like this:

<li @ViewBag.Home>@Html.ActionLink("Home", "Index", "Home", null, new { title = "Go home" })</li>

When you navigate to a different page, say Programs, ViewBag.Home does not exist (instead ViewBag.Programs does); therefore, nothing is rendered, not even class="". I think this is cleaner both for maintainability and cleanliness. I tend to always want to leave logic out of the view as much as I can.

score 4 · Answer 8 · answered May 24 '18 at 15:24

Considering what Damith posted, I like to think you can just qualify active by the Viewbag.Title (best practice is to populate this in your content pages allowing your _Layout.cshtml page to hold your link bars). Also note that if you are using sub-menu items it also works fine:

<li class="has-sub @(ViewBag.Title == "Dashboard 1" || ViewBag.Title == "Dashboard 2" ? "active" : "" )">
    <a href="javascript:;">
        <b class="caret"></b>
        <i class="fa fa-th-large"></i>
        <span>Dashboard</span>
    </a>
    <ul class="sub-menu">
        <li class="@(ViewBag.Title == "Dashboard 1" ? "active" : "")"><a href="index.html">Dashboard v1</a></li>
        <li class="@(ViewBag.Title == "Dashboard 2" ? "active" : "")"><a href="index_v2.html">Dashboard v2</a></li>
    </ul>
</li>

score 3 · Answer 9 · edited Dec 02 '17 at 18:05

This solution is simple for Asp.net MCV 5.

Create a static class, for example Utilitarios.cs.

Inside the Class create a static method:

public static string IsLinkActive(this UrlHelper url, string action, string controller)
{
    if (url.RequestContext.RouteData.Values["controller"].ToString() == controller &&
        url.RequestContext.RouteData.Values["action"].ToString() == action)
    {
        return "active";
    }

    return "";
}

call like this

<ul class="sidebar-menu" data-widget="tree">
    <li class="header">HEADER</li>
    <li class="@Url.IsLinkActive("Index", "Home")">
        <a href="@Url.Action("Index", "Home")"><i class="fa fa-link"></i> <span>Home</span></a>
    </li>
    <li class="@Url.IsLinkActive("About", "Home")">
        <a href="@Url.Action("About", "Home")"><i class="fa fa-link"></i><span>About</span></a>
    </li>
</ul>

score 3 · Answer 10 · answered Feb 24 '19 at 05:02

I created an HtmlHelper extension that adds an ActiveActionLink method for those of you who want to add the "active" class to the link itself rather than the <li> surrounding the link.


public static class LinkExtensions
{
    public static MvcHtmlString ActiveActionLink(this HtmlHelper html, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        return ActiveActionLink(html, linkText, actionName, controllerName, new RouteValueDictionary(routeValues), HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    }

    public static MvcHtmlString ActiveActionLink(this HtmlHelper html, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes)
    {
        const string activeClassName = "active";

        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeController = (string)routeData.Values["controller"];

        var active = controllerName.Equals(routeController) && actionName.Equals(routeAction);

        if (active)
        {
            var @class = (string)htmlAttributes["class"];

            htmlAttributes["class"] = string.IsNullOrEmpty(@class)
                ? activeClassName
                : @class + " active";
        }

        var link = html.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes);

        return link;
    }
}

Usage is as follows:

@Html.ActiveActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-item nav-link" })

score 3 · Answer 11 · answered Dec 30 '20 at 00:09

Most of the solutions on this question all require you to specify the 'page' on both the li and the a (via HtmlHelper) tag. Both @Wolles and @Crush's answers eliminated this duplication, which was nice, but they were using HtmlHelper extension methods instead of TagHelpers. And I wanted to use a TagHelper and support Razor Pages.

You can read my full post here (and get the source code), but the gist of it is:

<bs-menu-link asp-page="/Events/Index" menu-text="Events"></bs-menu-link>

Would render (if the link was active obviously):

<li class="active"><a href="/Events">Events</a></li>

My TagHelper leverages the AnchorTagHelper internally (thus supporting asp-page, asp-controller, asp-action, etc. attributes). The 'checks' for active or not is similar to many of the answers to this post.

I really like your answer. You deserve upvotes! – ˈvɔlə Jun 25 '21 at 13:16 — ˈvɔlə, Jun 25 '21 at 13:16

score 2 · Answer 12 · edited May 23 '17 at 11:47

I modified dom's "not pretty" answer and made it uglier. Sometimes two controllers have the conflicting action names (i.e. Index) so I do this:

<ul class="nav navbar-nav">
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "HomeIndex" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "AboutIndex" ? "active" : "")">@Html.ActionLink("About", "Index", "About")</li>
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "ContactHome" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

score 2 · Answer 13 · answered Apr 28 '17 at 10:14

You can try this: In my case i am loading menu from database based on role based access, Write the code on your every view which menu your want to active based on your view.

<script type="text/javascript">
        $(document).ready(function () {         
            $('li.active active-menu').removeClass('active active-menu');
            $('a[href="/MgtCustomer/Index"]').closest('li').addClass('active active-menu');
        });
</script>

score 2 · Answer 14 · answered Jul 15 '17 at 18:51

is possible with a lambda function

@{
string controllerAction = ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString();
    Func<string, string> IsSelected= x => x==controllerAction ? "active" : "";
}

then usage

 @Html.ActionLink("Inicio", "Index", "Home", new { area = "" }, new { @class = IsSelected("HomeIndex")})

score 1 · Answer 15 · answered Feb 10 '15 at 15:26

1

Add '.ToString' to improve comparing on ASP.NET MVC

<ul class="nav navbar-nav">
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>

--

answered Feb 10 '15 at 15:26

This won't work if there are same action names in two different controllers. Test it out with Home and About controllers with Index action. – hyde Jul 08 '15 at 17:47
u could defind function server on razor like: `@functions { public bool IsActive(string action, string controller) { var actionRoute = ViewContext.RouteData.Values["Action"].ToString(); var controlRoute = ViewContext.RouteData.Values["Controller"].ToString(); return controller.Equals(controlRoute)&& actionRoute.Equals(actionRoute); } }` and usage: `
`

Hua Trung

Mar 16 '17 at 12:18

that function(in comment) makes even more mess. e.g for a Controller with multiple actions, all the links will be added active class. I have being trying to implement(customize one of these answers) for a side bar with Submenu in asp.net core 6/7 – Abdi fatah Apr 10 '23 at 11:47

score 1 · Answer 16 · answered Jul 14 '15 at 20:41

We also can create UrlHelper from RequestContext which we can get from MvcHandler itself. Therefore I beleive for someone who wants to keep this logic in Razor templates following way would be helpful:

In project root create a folder named AppCode.
Create a file there named HtmlHelpers.cshtml

Create a helper in there:

@helper MenuItem(string action, string controller)
{
     var mvcHandler = Context.CurrentHandler as MvcHandler;
     if (mvcHandler != null)
     {
         var url = new UrlHelper(mvcHandler.RequestContext);
         var routeData = mvcHandler.RequestContext.RouteData;
         var currentAction = routeData.Values["action"].ToString();
         var currentController = routeData.Values["controller"].ToString();
         var isCurrent = string.Equals(currentAction, action, StringComparison.InvariantCultureIgnoreCase) &&
                         string.Equals(currentController, controller, StringComparison.InvariantCultureIgnoreCase);

        <div class="@(isCurrent ? "active" : "")">
            <div>@url.Action(action, controller)</div>
        </div>
     }   
}

Then we can use on our views like this:

@HtmlHelpers.MenuItem("Default", "Home")

Hope that it helps to someone.

This is really cool. Are there any performance drawbacks here? — crush, Feb 24 '19 at 04:52
@crush, I haven't measured it, but I would expect it to have low performance impact because I think the framework uses similar logic to create `UrlHelper` that you have in `Controller.Url`. The only thing is that we probably don't want to execute creating `UrlHelper` for each call to `MenuItem` so we may apply a tick of saving it into HttpContext Items after first call to the helper so we do it only once per request. — Oleksii Aza, Feb 24 '19 at 20:31
@OleksiiAza is `@helper` a class since you named the file in `AppCode` HtmlHelpers.cshtml — Abdi fatah, Apr 01 '23 at 12:21
@abdi-fatah, I think it's rather a syntax to declare a custom helper function, more details: https://weblogs.asp.net/scottgu/asp-net-mvc-3-and-the-helper-syntax-within-razor — Oleksii Aza, Apr 02 '23 at 18:05

score 1 · Answer 17 · answered Sep 16 '16 at 00:30

I would like to propose this solution which is based on the first part of Dom's answer.

We first define two variables, "action" and "controller" and use them to determine the active link:

{ string controller = ViewContext.RouteData.Values["Controller"].ToString();
string action = ViewContext.RouteData.Values["Action"].ToString();}

And then:

<ul class="nav navbar-nav">
    <li class="@((controller == "Home" && action == "Index") ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@((controller == "Home" && action == "About") ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@((controller == "Home" && action == "Contact") ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Now it looks nicer and no need for more complex solutions.

score 0 · Answer 18 · answered Dec 06 '13 at 18:14

the answer by @dombenoit works. Though it introduces some code to maintain. Check this syntax out:

using (var nav = Html.Bootstrap().Begin(new Nav().Style(NavType.NavBar).SetLinksActiveByControllerAndAction()))
{
    @nav.ActionLink("Link 1", "action1")
    @nav.ActionLink("Link 2", "action2")
    @nav.Link("External Link", "#")
}

Notice the use of .SetLinksActiveByControllerAndAction() method.

If you wonder what makes this syntax possible, check out TwitterBootstrapMVC

Thanks for the answer Dmitry, I am testing out TwitterBootstrapMVC — Gillespie, Dec 07 '13 at 13:38

score 0 · Answer 19 · answered Jul 20 '16 at 10:14

I also was looking for a solution and jQuery helped pretty much. First, you need to give 'id's to your <li> elements.

<li id="listguides"><a href='/Guides/List'>List Guides</a></li>

After doing this in your layout page, you can tell jQuery which <li> element should be 'selected' in your view.

@section Scripts{
    <script type="text/javascript">
        $('#listguides').addClass('selected');
    </script>
}

Note: You need to have @RenderSection("scripts", required: false) in your layout page, just before the </body> tag to add that section.

score 0 · Answer 20 · answered Aug 25 '17 at 14:51

I realized that this problem was a common problem for some of us, so I published my own solution using nuget package. Below you can see how it works. I hope that will be useful.

Note:This nuget package is my first package. So if you see a mistake, please give feedback. Thank you.

Install Package or download source code and add your Project
```
-Install-Package Betalgo.MvcMenuNavigator
```

Add your pages to an enum

public enum HeaderTop
{
    Dashboard,
    Product
}
public enum HeaderSub
{
    Index
}

Put Filter to top of your Controllor or Action

[MenuNavigator(HeaderTop.Product, HeaderSub.Index)]
public class ProductsController : Controller
{
    public async Task<ActionResult> Index()
    {
        return View();
    }

    [MenuNavigator(HeaderTop.Dashboard, HeaderSub.Index)]
    public async Task<ActionResult> Dashboard()
    {
        return View();
    }
}

And use it In your header layout like this

@{
var headerTop = (HeaderTop?)MenuNavigatorPageDataNavigatorPageData.HeaderTop;
var headerSub = (HeaderSub?)MenuNavigatorPageDataNavigatorPageData.HeaderSub;
}
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
    <li class="@(headerTop==HeaderTop.Dashboard?"active selected open":"")">
        <a href="@Url.Action("Index","Home")">Dashboard</a>
    </li>
    <li class="@(headerTop==HeaderTop.Product?"active selected open":"")">
        <a href="@Url.Action("Index", "Products")">Products</a>
    </li>
</ul>

More Info: https://github.com/betalgo/MvcMenuNavigator

score 0 · Answer 21 · answered Jul 14 '18 at 11:51

I believe here is a cleaner and smalller code to do get the selected menu being "active":

 <ul class="navbar-nav mr-auto">
                <li class="nav-item @Html.IfSelected("Index")">
                    <a class="nav-link" href="@Url.Action("Index", "Home")">Home</a>
                </li>
                <li class="nav-item @Html.IfSelected("Controls")">
                    <a class="nav-link" href="@Url.Action("Controls", "Home")">MVC Controls</a>
                </li>
                <li class="nav-item @Html.IfSelected("About")">
                    <a class="nav-link" href="@Url.Action("About", "Home")">About</a>
                </li>
</ul>

 public static string IfSelected(this HtmlHelper html, string action)
        {
            return html
                       .ViewContext
                       .RouteData
                       .Values["action"]
                       .ToString() == action
                            ? " active"
                            : "";
        }

Nice, although probably needs to be extended for controller & area in some cases — planetClaire, Jan 27 '19 at 05:08

score 0 · Answer 22 · answered Jun 26 '21 at 05:44

I found a solution for multiple routes. TagHelper:

[HtmlTargetElement("li", Attributes = "active-when")]
    public class ActiveTagHelper : TagHelper
    {
        [HtmlAttributeName("active-when")]
        public string ActiveWhen { get; set; }

        [ViewContext]
        [HtmlAttributeNotBound]
        public ViewContext ViewContext { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (ActiveWhen == null)
                return;

            var hrefs = ActiveWhen.Split(",");

            var currentController = ViewContext.RouteData.Values["controller"].ToString();
            var currentAction = ViewContext.RouteData.Values["action"].ToString();

            foreach (var item in hrefs)
            {
                var targetController = item.Split("/")[1];
                var targetAction = item.Split("/")[2];

                if (currentController.Equals(targetController) && currentAction.Equals(targetAction))
                {
                    if (output.Attributes.ContainsName("class"))
                    {
                        output.Attributes.SetAttribute("class", $"{output.Attributes["class"].Value} active");
                    }
                    else
                    {
                        output.Attributes.SetAttribute("class", "active");
                    }
                }
            }
        }
    }

Import:

@addTagHelper *, YourProjectName

Usage:

   <li class="nav-item" active-when="/Product/Index,/Product/Add"></li>

score 0 · Answer 23 · answered Dec 04 '21 at 17:17

0

At top of the layout page,

@{ var _path = Context.Request.Path.ToString();}

and in your navbar,

<a class="nav-link dropdown-toggle @(_path.Contains("UTBulkFlights") ? "active" : "")">abcLink</a>

answered Dec 04 '21 at 17:17

Abdul Majid

95
1
10

JC Lizard · Answer 24 · 2013-12-05T21:20:12.197

-1

if is it is not showing at all, the reason is that you need two @ sign:

@@class

BUT, I believe you might need to have the active class on the "li" tag not on the "a" tag. according too bootstrap docs (http://getbootstrap.com/components/#navbar-default):

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

therefore your code will be:

<ul class="nav navbar-nav">
  <li class="active">@Html.ActionLink("Home", "Index", "Home", null)</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

edited Dec 05 '13 at 21:20

answered Dec 05 '13 at 21:11

JC Lizard

1,050
6
17

The @@class throws an error, I originally had your code example above, which works, but isn't exactly as Actionlinks "should" be? – Gillespie Dec 05 '13 at 21:16
edited. the @@ is not required. you have to put the class on the EA – JC Lizard Dec 05 '13 at 21:17

score -1 · Answer 25 · answered May 06 '17 at 21:07

I have make combination of answers above and made my solution.

So..

First in razor block create one string variable which will contain name value of controller and action that is called by user.

    @{
        string controllerAction =  ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString(); 
    }

Then use combination of HTML and Razor code:

    <ul class="nav navbar-nav">
        <li class="@(controllerAction == "HomeIndex" ? "active" : "" )">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@(controllerAction == "AboutIndex" ? "active" : "" )">@Html.ActionLink("About", "Index", "About")</li>
        <li class="@(controllerAction == "HomeContact" ? "active" : "" )">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>

I think, that this is good because you don't need to access "ViewContext.RouteData.Values" each time to get controller name and action name.

score -1 · Answer 26 · answered Dec 11 '17 at 00:25

My Solution to this problem is

<li class="@(Context.Request.Path.Value.ToLower().Contains("about") ? "active " : "" ) nav-item">
                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
            </li>

A better way may be adding an Html extension method to return the current path to be compared with link

Anup Sharma · Answer 27 · 2019-09-03T15:55:37.413

I did this:

Made a helper in menu partial view

 @helper RouterLink(string action, string controller)
{
    var IsActive = ViewContext.RouteData.Values["Controller"].ToString() == controller && ViewContext.RouteData.Values["Action"].ToString() == action;
    <text>href="@Url.Action(action, controller)"</text>if (IsActive){ <text>class="active"</text>}
}

Then used it in the anchor tag like this:

<li><a @RouterLink("Index","Home")>Home</a></li>

My application had no areas but it can also be included as another variable in the helper function. And I had to pass the active class to the anchor tag in my view. But li can also be configured like this.

You see, downvote doesn't really help if you don't mention the reason. — Anup Sharma, Nov 15 '19 at 11:58

RouR · Answer 28 · 2021-04-16T20:01:58.903

ASP.NET Core & Bootstrap 4 & AdminLte

[HtmlTargetElement("a", Attributes = "active-then")]
[HtmlTargetElement("a", Attributes = "asp-action")]
[HtmlTargetElement("a", Attributes = "asp-controller")]
public class AnchorActiveTagHelper : AnchorTagHelper
{
    public AnchorActiveTagHelper(IHtmlGenerator generator) : base(generator)
    {
    }

    [HtmlAttributeName("active-then")]
    public string ActiveWhen { get; set; }

    [ViewContext] [HtmlAttributeNotBound] public ViewContext ViewContextData { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        base.Process(context, output);
        
        if (ActiveWhen == null)
            return;

        var currentController = ViewContextData.RouteData.Values["controller"].ToString();
        var currentAction = ViewContextData.RouteData.Values["action"].ToString();

        if (currentController.Equals(Controller) && currentAction.Equals(Action))
        {
            if (output.Attributes.ContainsName("class"))
            {
                output.Attributes.SetAttribute("class", $"{output.Attributes["class"].Value} active");
            }
            else
            {
                output.Attributes.SetAttribute("class", "active");
            }
        }
    }
}

And

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, YourProject.PlatformExtensions

Usage

<li class="nav-item">
    <a asp-controller="Home" asp-action="Index" class="nav-link" active-then="active">
       <i class="nav-icon fas fa-home"></i>
       <p>Home</p>
    </a>
</li>

Thanks @WoIIe and @Shahab

How to add "active" class to Html.ActionLink in ASP.NET MVC

28 Answers28

Easy ASP.NET Core 3.0 and TagHelpers

ASP.NET Core & Bootstrap 4

ASP.NET Core & Bootstrap 4 & AdminLte

Linked

Related