0

This is html code for my navbar, i want ActionLinks to receive an "active" html attribute when it gets clicked so it will get outlined when browsing selected view. Could anyone point me into right direction?

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            @Html.ActionLink("Home", "Index", "Home", new {@class = "nav-link"})
        </li>
        <li class="nav-item">
            @Html.ActionLink("About", "About", "Home", new { @class="nav-link" })
        </li>
        <li class="nav-item">
            @Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })
        </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
</div>

XomRng
  • 171
  • 12
  • You don't need `active` on the `nav-link` to highlight it, since you are already getting the `active` class on its parent `nav-item`. – Nisarg Shah Nov 09 '17 at 06:19
  • but when i click for example on "Contact" action and when the view loads, my nav link does not become "active". If i remove the active attribute would it work? I want the active tag to bo applied programaticaly since my navbar is a partial view inserted into layout. – XomRng Nov 09 '17 at 07:00
  • I meant that you can modify CSS for that. Anyway seems like your question already has two duplicates. So you can check the answers to those questions. – Nisarg Shah Nov 09 '17 at 07:02

0 Answers0