How to create NavMenu with collapsible submenu in .Net Core Blazor app

Question

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

I just edited the original blazor app but no success. The button appears but it doesn't collapse submenu. any idea?

<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>
    <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>
    <li class="dropdown">

        <button data-toggle="collapse" data-target="#demo">Collapsible</button>

        <div id="demo" class="collapse">
            <ul>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="meeting">
                        <span class="oi oi-plus" aria-hidden="true"></span> Meetings
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="conference">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Conferences
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="event">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Events
                    </NavLink>
                </li>

            </ul>
        </div>

    </li>
</ul>

Answer 1

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.

What you do instead is to use an if statement and thus let Blazor take care of the rendering:

    <NavLink class="nav-link" @onclick="()=>expandSubNav = !expandSubNav">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
    </NavLink>
    @if (expandSubNav)
    {
        <NavLink class="expand-menu" href="">
            <span>Sub1</span>
        </NavLink>
        <NavLink class="" href="">
            <span>Sub2</span>
        </NavLink>
    }

And put the expandSubNav field into your code section:

@code {

    private bool expandSubNav;

}

Answer 2

You can try this solution if you have more submenus

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">System</a>
    <button class="navbar-toggler" @onclick="() => ToggleNavMenu(navSubmenu)">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="() => ToggleNavMenu(NavSubmenu.None)" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="() => TogleSubmenu(NavSubmenu.First)">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Submenu 1
            </NavLink>
        </li>

        @if (navSubmenu == NavSubmenu.First)
        {
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Data
                </NavLink>
            </li>
        }

        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="() => TogleSubmenu(NavSubmenu.Second)">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Submenu 2
            </NavLink>
        </li>

        @if (navSubmenu == NavSubmenu.Second)
        {
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Data
                </NavLink>
            </li>
        }
    </ul>
</div>

@code {
    private enum NavSubmenu
    {
        None,
        First,
        Second
    }

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private NavSubmenu navSubmenu =  NavSubmenu.None;
    private bool collapseNavMenu = true;


    private void ToggleNavMenu(NavSubmenu? submenu = null)
    {
        collapseNavMenu = !collapseNavMenu;
        navSubmenu = submenu ?? navSubmenu;
    }

    private void TogleSubmenu(NavSubmenu submenu)
    {
        if (navSubmenu == submenu)
            navSubmenu = NavSubmenu.None;
        else
            navSubmenu = submenu;
    }
}