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 2Do not use the data-toggle and data-target for it.
These are used by boostrap.js however you do not want to modify the DOM in that way.
Blazor template with menu across the top,If you open NavMenu.razor you'll see it's just a Bootstrap Navbar, for this specific Explorer-like layout - a vertical navbar on the left, the main area on the right.
The NavLink components is just a <a> tag but with services to update its css class.
What you do instead is to use an if statement and thus let Blazor take care of the rendering:
<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