Blazor - Add Active Class to Current Element

Question

Trying to develop a website fully in Blazor

I'm trying to figure out how to add e.g. active class to the currently selected element. I have a side menu bar and it would be awesome to know on which page the user is.

Found this JavaScript solution but I wanted to do it via #c

Any ideas on how to implement it?

Answer 1

Microsoft.AspNetCore.Components.Routing.NavLink component automatically adds "active" class (or a class of a your choosing). Example code below.

<ul class="nav flex-column">
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </li>
</ul>

Source: https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.routing.navlink?view=aspnetcore-3.1