受欢迎的博客标签

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

Published

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

Do 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;

}

 

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