The active class is set on the wrong div on the MudNavLink when using an onclick event (and thus setting the class via code).
I’m using MudBlazor in a .net 8 application and I have created a blazor page that contains a MudNavMenu like this:
<MudNavMenu>
<MudNavLink OnClick="@(e => ToggleActiveSection("Profile"))" Class="@($"{(ActiveSection == "Profile" ? "active" : "")}")">Profile</MudNavLink>
<MudNavLink OnClick="@(e => ToggleActiveSection("Security"))" Class="@($"{(ActiveSection == "Security" ? "active" : "")}")">Security</MudNavLink>
</MudNavMenu>
The ToggleActiveSection renders a component in the page depending on the MudNavLink clicked (
<Profile />
or <Security />
. It also sets the property ActiveSection
. This works fine. Accept for displaying the active link. When I look at the code in my browser, I notice that active is not set to the correct div:
It is set to the div with “mud-nav-item” instead of “mud-nav-link”. When I change this in the browser, the active link shows up on my screen.
Am I doing something wrong?