How do i set "nav-item active" in Blazor?

I'm building an application using Blazor & Bootstrap. I want to use a standard bootstrap navbar. I can't figure out how to add the "active" class to the <li> tag selected.

This is my code:

<div class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item"><NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink></li><li class="nav-item"><NavLink class="nav-link" href="/counter" Match="NavLinkMatch.All">Counter</NavLink></li><li class="nav-item"><NavLink class="nav-link" href="/fetchdata" Match="NavLinkMatch.All">Fetch data</NavLink></li></ul></div>

The built in <NavLink> which is a blazor component changes the class for the <a/> automatically. But since i am using bootstrap navbar i need to add "active" to the class of the selected <li>.

This is how it should look like when the link is active:

<li class="nav-item active"><NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink></li>