If you want the active route to appear highlighted in your navigation menu when you navigate to a page in ASP.NET MVC Core, this handy tag helper will do it for you.
The bulk of this code has been taken from an excellent blog post by Patrick Niezen whereby he improves a sample TagHelper that creates a navigation link for you. It’s an excellent read, and many of you would probably prefer to use his code instead. The main adaptation I’ve made is to ensure this tag helper only adds the “active” class, it does not create a url or anchor tag.
I much prefer to have control over my html and I also want the flexibility to highlight the navigation link seperately from the url it points to.
Let’s take a look at the code.
ActiveRouteTagHelper code
I’m not going to explain how this works, rather I just want to point out that a lot of the properties were taken straight from the built-in AnchorTagHelper, which is why it might look scary.
Take the time to read the code carefully, each part of it will start to make sense, especially once you’ve done some more research.
Once you’re comfortable, copy this code into a class inside your project.
Setup
Once you’ve added this class to your project, ensure the following code is inside your Views\_ViewImports.cshtml.
@addTagHelper *, Pinch.SDK.WebSample
Replace the Pinch.SDK.WebSample with your own assembly name.
Usage
<ul class="nav nav-sidebar">
<li is-active-route asp-controller="Home" asp-action="Index"><a asp-controller="Home" asp-action="Index">Overview</a></li>
<li is-active-route asp-controller="Payers"><a asp-controller="Payers" asp-action="Index">Payers</a></li>
<li is-active-route asp-controller="Transfers"><a asp-controller="Transfers" asp-action="Index">Transfers</a></li>
<li is-active-route asp-controller="Merchants"><a asp-controller="Merchants" asp-action="Index">Merchants</a></li>
<li is-active-route asp-controller="Home" asp-action="Connect"><a asp-controller="Home" asp-action="Connect">Connect</a></li>
</ul>
There are a couple of things to note here.
- The asp-* attributes on the
litag can be different from theatag. This is great for when you just want to highlight all routes on a single controller. - You can be as specific as you like, including adding route values using syntax like
asp-route-id="24"orasp-route-myRouteValue="cottageCheese".
You can explore the example code I’ve given above by visiting my Pinch SDK Sample Code.
If you’d like to know more about how tag helpers work check out these great resources: