title: How to create NavMenu with collapsible submenu in .Net Core Blazor app
body: <p>I am trying to create a blazor navmenu which has a shape like this</p>
  
  <ul>
  <li><p>item a</p></li>
  <li><p>item b</p></li>
  </ul>
  
  <p>when I click on item b it expands with sub menu like this and clicking on subitems, new pages open</p>
  
  <ul>
  <li><p>item a</p></li>
  <li><p>item b</p>
  
  <ul>
  <li><p>subitem 1</p></li>
  <li><p>subitem 2</p></li>
  </ul></li>
  </ul>
  
  <p>I just edited the original blazor app but no success. The button appears but it doesn't collapse submenu. any idea?</p>
  
  <pre><code>&lt;div class="@NavMenuCssClass" @onclick="@ToggleNavMenu"&gt;
  &lt;ul class="nav flex-column"&gt;
      &lt;li class="nav-item px-3"&gt;
          &lt;NavLink class="nav-link" href="" Match="NavLinkMatch.All"&gt;
              &lt;span class="oi oi-home" aria-hidden="true"&gt;&lt;/span&gt; Home
          &lt;/NavLink&gt;
      &lt;/li&gt;
      &lt;li class="nav-item px-3"&gt;
          &lt;NavLink class="nav-link" href="counter"&gt;
              &lt;span class="oi oi-plus" aria-hidden="true"&gt;&lt;/span&gt; Counter
          &lt;/NavLink&gt;
      &lt;/li&gt;
      &lt;li class="nav-item px-3"&gt;
          &lt;NavLink class="nav-link" href="fetchdata"&gt;
              &lt;span class="oi oi-list-rich" aria-hidden="true"&gt;&lt;/span&gt; Fetch Data
          &lt;/NavLink&gt;
      &lt;/li&gt;
      &lt;li class="dropdown"&gt;
  
          &lt;button data-toggle="collapse" data-target="#demo"&gt;Collapsible&lt;/button&gt;
  
          &lt;div id="demo" class="collapse"&gt;
              &lt;ul&gt;
                  &lt;li class="nav-item px-3"&gt;
                      &lt;NavLink class="nav-link" href="meeting"&gt;
                          &lt;span class="oi oi-plus" aria-hidden="true"&gt;&lt;/span&gt; Meetings
                      &lt;/NavLink&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item px-3"&gt;
                      &lt;NavLink class="nav-link" href="conference"&gt;
                          &lt;span class="oi oi-list-rich" aria-hidden="true"&gt;&lt;/span&gt; Conferences
                      &lt;/NavLink&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item px-3"&gt;
                      &lt;NavLink class="nav-link" href="event"&gt;
                          &lt;span class="oi oi-list-rich" aria-hidden="true"&gt;&lt;/span&gt; Events
                      &lt;/NavLink&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>