The Best Way to Highlight or Change Current Menu Item CSS Class in MVC

Question

I have read a few articles as I was searching for a solution. They all seemed to favor a hard-coded or HTML Helper alternative; however, I wanted something simple and database driven. This is my best solution (submitted as an answer, by me).

Here are some other articles' solutions:

score 1 · Accepted Answer · answered Sep 12 '12 at 17:41

Just pass a TempData down from one of your controllers like this:

TempData("CurrentPage") = "Nutrition"

Then, in your View add a conditional like this:

<ul>

@For Each item In Model
    Dim currentItem = item

    If (Not String.IsNullOrEmpty(TempData("CurrentPage")) And TempData("CurrentPage") = currentItem.NAV_Element) Then
        @<li><a class="current" href="@Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">@Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>

    Else
        @<li><a href="@Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">@Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>
    End If


Next

</ul>

score 1 · Answer 2 · answered Sep 13 '12 at 11:58

1

I have accomplished this in the past by using the route values to generate a href and then setting the parent tab to active based on that.

This is a bootstrap flavoured version:

 <ul class="nav nav-tabs">
     <li><a href="/somepage">Some page</a></li>
     <li><a href="/someotherpage">Some other Page</a></li>
 </ul>

 <script type="text/javascript">
     $(function(){
          $('a[href="@Url.Action(ViewContext.RouteData.Values)"]').parents("li").addClass("active");
     };

 </script>

Si

answered Sep 13 '12 at 11:58

Slicksim

7,054
28
32

Thanks, that's a good idea. I still prefer my solution because it doesn't depend on javascript as this one seems to. – user1477388 Sep 13 '12 at 12:07
-1 every `Action()` overload takes a string as the first parameter. – user247702 Jan 28 '13 at 15:50

score 0 · Answer 3 · answered Jan 26 '18 at 23:41

I know I am too late to answer this but if you are using ASP MVC and looking for highlighting Menu items using controller and action, here is the solution which is working perfectly fine for me -

<li> <a href='@Url.Action("<action name>", "<controller name>")' class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "ControllerAction" ? "active" : "" )"> <i class="fa fa-user-plus"></i> <span>Signup</span> </a> </li>

The Best Way to Highlight or Change Current Menu Item CSS Class in MVC

3 Answers3