Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

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

$
0
0

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>


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>