Blazor Nav Menu Sub Menu

Question

I have created a menu item with a collapsible sub menu. When on the Home page the top level item Home is getting decorated with the active attribute, the expected behavior, and then the item is showing as active since I have the href set to nothing (href="") When the Index.razor page is showing the Administration menu item is set to active as well since the href is set to empty string as well.

What is the best way to have the Administration look like a menu item? Should I use a div in this case?

Is there a way to make the default active attribute not be assigned?

I think I'm missing some simple Blazor thing to make this behave like I want. Any help is much appreciated.

HTML

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <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>
        <AuthorizeView>
            <Authorized>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Calculator/CalculationName">
                        <span class="oi oi-list" aria-hidden="true"></span> Calculation Set
                    </NavLink>
                </li>
            </Authorized>
        </AuthorizeView>

        <AuthorizeView Roles="Admin">
            <Authorized>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="" @onclick="() => expandAdminSubMenu = !expandAdminSubMenu">
                        <span class="oi oi-book" aria-hidden="true"></span>Administration
                    </NavLink>
                    @if (expandAdminSubMenu)
                    {
                    <ul class="nav flex-column">
                        <li class="nav-item px-3">
                            <NavLink class="nav-link" href="Administration/ClientList" [email protected]>
                                <span class="oi oi-person" aria-hidden="true"></span>Client List
                            </NavLink>
                        </li>
                        <li class="nav-item px-3">
                            <NavLink class="nav-link" href="Administration/Client/-1" [email protected]>
                                <span class="oi oi-person" aria-hidden="true"></span>Client
                            </NavLink>
                        </li>
                    </ul>
                    }
                </li>
            </Authorized>
        </AuthorizeView>

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="https://www.example.com/contact-us/" target="_blank">
                <span class="oi oi-person" aria-hidden="true"></span> Contact Us
            </NavLink>
        </li>
    </ul>
</div>

@code{
    private bool expandAdminSubMenu = false;
}

CSS

.sidebar .nav-item a.active {
    background-color: #3b34a8;
    color: white;
    font-weight: bold;
}

.sidebar .nav-item a:hover {
    background-color: #3b34a8;
    color: white;
}

rdmptn rdmptn · Accepted Answer · 2021-01-06T20:36:51

You can set ActiveClass="@string.Empty" - the ActiveClass is the parameter that controls what active class that navlink will get and it defaults to active, but you can set it to an empty string so that it renders nothing.

Option 2 = replace NavLink with a simple <a> tag - it won't get the active class.

Blazor Nav Menu Sub Menu

1 Answers