Bootstrap Navbar Active Class with MVC

The ASP.NET MVC project template comes with Bootstrap scaffolding by default. And Bootstrap comes with default styling for active navbar links. So you might find it a little odd that the ASP.NET bootstrap template does not style the active menu item by default.

It can, it just seems as if this functionality wasn’t included out of the box:

styled navabar

If you plan on utilizing the bootstrap’s powerful navigational layout, you should definitely add styling for the current page. It helps users keep track of where they are within the application and assists with navigation.

To do so, we can add the active class dynamically on the shared layout by checking the current routing data. Here’s how:

Markup

When you create a new ASP.NET Web Application using MVC, the project should already contain some default pages and navigational links in the navbar. The navbar is defined as part of the shared layout in the Views folder. Your Solution Explorer should look like this:

solution explorer

In the _layout.vbhtml file, you should find the following markup:

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

In order to highlight the current tab in the Bootstrap Navbar, the <li> element needs to be given the class named active. As an example, just try hard coding it in on any one of the current links:

<div class="navbar-collapse collapse">
    <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>
</div>

This should look like the screenshot from above. But what we’d really like to do, is generate the active class dynamically for each li depending on the current page. We’ll insert the string active with an extension method called IsActive that will take in parameters for the Controller and Route.

We can use our extension method to insert the active class on the appropriate action link like this:

<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>

Extension Method

If you don’t already have one, create a folder in your project named Utilities and add a static class (or Module in VB) named Utilities or Extensions.

Then, we’ll add an extension method called IsActive ontop of the HtmlHelper class. We’ll use this to return the active class if the passed in controller text and action text match the current route.

To programmatically determine the current controller and action, we’ll use the ViewContext property on our HtmlHelper object. The ViewContext exposes, among other things, a property containing the RouteData which contains a collection of URL parameter values and default values for the route in its Values property.

The whole thing should look like this:

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" : "";
    }
}

Finally, in order for your view to access this method, you’ll have to make sure you import the namespace into your view using the razor syntax like this:

@using YourProjectName.Utilities

Run your project and the current page should be highlighted!

Closing Remarks

You’ll notice that the login pages do not highlight when you navigate to the default account pages provided. See if you can use the info here to modify the _loginPartial page in the Shared Layout section. If you get stuck, you can look at the full demo below.

Chris Way has a great blog post on Setting the active link in a Twitter Bootstrap Navbar in ASP.NET MVC. He comes up with a single method to generate the <li> element and the <a> element nested inside of it since there is largely redundant routing info. I’ve opted away from that for maximal flexibility as it locks you into a single method for producing links, but it does provide a terser inline syntax if that’s all you need to do.

Also, a lot of the basis for this code was taken from the StackOverflow question How to add active class to Html.ActionLink in ASP.NET MVC

Source Code:

You can view the full working solution on GitHub in both VB and C#

https://github.com/KyleMit/CodingEverything/tree/master/MVCBootstrapNavbar


Permalink to article - Published with markdown via stackedit.io

24 comments:

  1. Very nice solution, well written article. Thanks a lot!

    ReplyDelete
  2. great one.... thank you very much.. :)

    ReplyDelete
  3. Hi. It took me awhile to find a good solution for this issue... Well, this one is well explained and it works like a charm. Thanks :)

    ReplyDelete
  4. how to download source code there is not any link

    ReplyDelete
    Replies
    1. You can just plug this into any existing MVC project, no need for any source code.

      Delete
  5. Thank you! Finally a solution!

    ReplyDelete
  6. In ASP.NET 5, there is no longer HtmlHelper, and instead of @Html.ActionLink, it is "a asp-controller="Home" asp-action="Index"". Any idea how to get the active menu highlighted?

    ReplyDelete
    Replies
    1. Replace the HtmlHelper with IHtmlHelper to get it working in ASP.NET 5 MVC 6 RC1

      Delete
  7. Great step by step solution, thanks for the help!

    ReplyDelete
  8. Great example Kyle - Thank You!

    To get this to worik with ASP.NET 5, MVC 6, replace the HtmlHelper with IHtmlHelper. Presumably this is needed because of the way dependency injection is used. I got the idea to try this after skimming Startup.cs Listing 2 code in this article in Visual Studio Magazine ASP.NET MVC 6 and Tag Helpers, Part 2.

    ReplyDelete
  9. Very Good ! Thanks you friend

    ReplyDelete
  10. twitter bootstrap horizontal dropdown menu active in mvc 4 razor master page

    ReplyDelete
  11. is working for singal menu how to apply for dropdown menu

    ReplyDelete
  12. woow.. cool. its perfectly working, after spending couple of day on google.
    Thanks a lot.

    ReplyDelete
  13. How do you get this working with areas

    ReplyDelete
  14. The Information shared was very much useful My sincere Thanks for sharing this post Please Continue to share this post
    Dot Net Training in Chennai

    ReplyDelete