ASP.NET Core Blazor(wjl)- How to create NavMenu with collapsible submenu in ASP.NET Core Blazor Server (.NET 10)

I'm using the Blazor template which using the NavLink component. This wraps up the bootstrap menu so it's basically bootstrap underneath.

I am trying to create a blazor navmenu which has a shape like this

item a
item b

when I click on item b it expands with sub menu like this and clicking on subitems, new pages open

item a
item b
    subitem 1
    subitem 2

To create a collapsible submenu in ASP.NET Core Blazor (.NET 10), you need to manage a C# boolean state flag to handle the expanded/collapsed state and ensure the navigation component runs using Interactive Server render mode. Without enabling interactivity, click events will not trigger, and the menu will remain static.

step 1.Enable Interactivity on the NavMenu

By default, the layout components in modern Blazor templates use static server-side rendering. 

Components/Layout/NavMenu.razor

<!-- add here-->
@rendermode InteractiveServer  

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">Stockso.BlazorServer</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="()=>expandSubNav = !expandSubNav">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        @if (expandSubNav)
        {
            <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>

</div>

And put the expandSubNav field into your code section:

@code {

    private bool expandSubNav;

}

.Net 8.x

step 1. NavMenu.razor

@* step 1. 加折叠代码 *@

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
     <nav class="flex-column">

        <div class="nav-item px-3">
            <NavLink class="" href="counter" @onclick="()=>expandSubNav1 = !expandSubNav1">
                <span class="oi oi-plus" aria-hidden="true"></span> 库存管理
            </NavLink>
        </div>

         @if (expandSubNav5)
         {

          }

    </nav>

</div>

@code {
    private bool collapseNavMenu = true;

    private bool expandSubNav1;
    private bool expandSubNav2;
    private bool expandSubNav3;
    private bool expandSubNav4;
    private bool expandSubNav5;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

search expandSubNav  in github

Blazor nav menu horizontal

https://www.xspdf.com/resolution/58914389.html

Blazor Collapse with multi submenus

https://forums.asp.net/t/2168463.aspx?Blazor+Collapse+submenus