Search code examples
.netasp.net-coreblazor

.net 8 blazor navlink style not working for external url

When using an external URL for the href attribute, the style of the menu list item changes. I want the style to remain the same. How would I do that.

Menu

    <div class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
        </NavLink>
    </div>
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="https://www.google.com/" Match="NavLinkMatch.All">
            <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Google
        </NavLink>
    </div>

result enter image description here

Solution

  • The default web app templates for some reason apply the "active" class to all NavLink elements, which doesn't make sense since only one link should be active. In order to maintain that style, I had to use an anchor tag as Md Farid Uddin Kiron suggested(thanks for steering me in the right direction) then apply the active class to all of those links. This solved the issue, but I couldn't find where or how classes are applied to the NavLink elements.