MVC5 - Navbar active color

Question

I am having trouble getting the active li in my nav bar to change color when I click it and go to that view, I have included some code below but I show you more if needed

This is my navbar code that is placed in my layout shared view:

<header id="main-header">
    <div class="container">
        <a href="@Url.Action("Index", "Home")">
            <img src="~/logo.png" id="logo" alt="logo" />
        </a>
        <nav class="main-nav">
            <ul>
                @if (User.IsInRole("Admin"))
                {
                    <li>@Html.ActionLink("Venues", "Index", "Venues")</li>
                    <li>@Html.ActionLink("Events", "Index", "Events")</li>
                    <li>@Html.ActionLink("Bands", "Index", "Bands")</li>
                    <li>@Html.ActionLink("Admin", "Admin", "Home")</li>
                    @Html.Partial("_LoginPartial")
                }
                else
                {
                    <li>@Html.ActionLink("Venues", "Index", "Venues")</li>
                    <li>@Html.ActionLink("Events", "Index", "Events")</li>
                    <li>@Html.ActionLink("Bands", "Index", "Bands")</li>
                    <li>@Html.Partial("_LoginPartial")</li>
                }
            </ul>
        </nav>
    </div>
</header>

This is the Header-Nav css classes I have:

.main-nav {
    float: right;
    padding-top: 17px;
}
.main-nav li {
    float: left;
    list-style: none;
    margin-right: 10px;
    position: relative;
}
.main-nav li:last-child {
    margin-right: 0px;
}
.main-nav li.current > a {
    border: 1px solid;
}
.main-nav li a {
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    padding: 2px 10px;
    font-family: 'Montserrat', sans-serif;
}

score 2 · Accepted Answer · edited May 23 '17 at 12:09

In each action method of the required controllers you can add ViewBag values:

public ActionResult Index()
{
    ViewBag.Action = ControllerContext.RouteData.Values["Action"].ToString();
    ViewBag.Controller = ControllerContext.RouteData.Values["Controller"].ToString();

    return View();
}

Then in the View you can use the following to apply the required CSS class:

<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li>
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li>
<li class="@(ViewBag.Action == "Admin" && ViewBag.Controller == "Home" ? "current" : "")">@Html.ActionLink("Admin", "Admin", "Home")</li>

This is probably an ok solution for these simple links - but if you were going to add many more I would recommend adding you own custom HtmlHelper. See accepted answer here for more information: How to add "active" class to Html.ActionLink in ASP.NET MVC

Edit:

You could simplify it even more by just having this in controller:

public class EventsController : Controller
{
    public ActionResult Index()
    {
        ViewBag.LinkText = "Events";

        return View();
    }
}

And then the links would just be, e.g.:

<li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>

MVC5 - Navbar active color

1 Answers1