Nested Multi Level Menu within MDB Angular Side Bar Nav


Topic: Nested Multi Level Menu within MDB Angular Side Bar Nav

saganesa asked 5 years ago

Need Code snippet for 5 level nested menu within Nav Side Bar. Please share.


Bartosz Termena staff answered 5 years ago

Dear @saganesa

Try something like this:

<!-- SideNav slide-out button -->
<a (click)="sidenav.toggle()" mdbBtn color="primary" class="p-3 button-collapse"
  ><mdb-icon fas icon="bars"></mdb-icon
></a>
<!--/. SideNav slide-out button -->

<!-- Sidebar navigation -->
<mdb-side-nav #sidenav class="fixed" [fixed]="true">
  <!-- Logo -->
  <li>
    <div class="logo-wrapper waves-light">
      <a href="#"
        ><img
          src="https://mdbootstrap.com/img/logo/mdb-transparent.png"
          class="img-fluid flex-center"
      /></a>
    </div>
  </li>
  <!--/. Logo -->
  <!--Social-->
  <li>
    <ul class="social">
      <li>
        <a class="icons-sm fb-ic"><mdb-icon fab icon="facebook-f"> </mdb-icon></a>
      </li>
      <li>
        <a class="icons-sm pin-ic"><mdb-icon fab icon="pinterest"> </mdb-icon></a>
      </li>
      <li>
        <a class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus"> </mdb-icon></a>
      </li>
      <li>
        <a class="icons-sm tw-ic"><mdb-icon fab icon="twitter"> </mdb-icon></a>
      </li>
    </ul>
  </li>
  <!--/Social-->
  <!--Search Form-->
  <li>
    <form class="search-form" role="search">
      <div class="form-group md-form waves-light" mdbWavesEffect>
        <input type="text" class="form-control" placeholder="Search" />
      </div>
    </form>
  </li>
  <!--/.Search Form-->
  <!-- Side navigation links -->
  <li>
    <ul class="collapsible collapsible-accordion">
      <mdb-accordion aria-multiselectable="false">
        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect
            ><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 1
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <mdb-accordion aria-multiselectable="false">
                <mdb-accordion-item [customClass]="'ml-2'">
                  <mdb-accordion-item-head mdbWavesEffect
                    ><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2
                  </mdb-accordion-item-head>
                  <mdb-accordion-item-body>
                    <ul>
                      <mdb-accordion>
                        <mdb-accordion-item [customClass]="'ml-2'">
                          <mdb-accordion-item-head mdbWavesEffect
                            ><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 3
                          </mdb-accordion-item-head>
                          <mdb-accordion-item-body>
                            <ul>
                              <mdb-accordion aria-multiselectable="false">
                                <mdb-accordion-item [customClass]="'ml-2'">
                                  <mdb-accordion-item-head mdbWavesEffect
                                    ><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 4
                                  </mdb-accordion-item-head>
                                  <mdb-accordion-item-body>
                                    <ul>
                                      <mdb-accordion aria-multiselectable="false">
                                        <mdb-accordion-item [customClass]="'ml-2'">
                                          <mdb-accordion-item-head mdbWavesEffect
                                            ><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 5
                                          </mdb-accordion-item-head>
                                          <mdb-accordion-item-body>
                                            <ul>
                                              <li><a href="#" mdbWavesEffect>Link 1</a></li>
                                              <li><a href="#" mdbWavesEffect>Link 2</a></li>
                                            </ul>
                                          </mdb-accordion-item-body>
                                        </mdb-accordion-item>
                                      </mdb-accordion>
                                    </ul>
                                  </mdb-accordion-item-body>
                                </mdb-accordion-item>
                              </mdb-accordion>
                            </ul>
                          </mdb-accordion-item-body>
                        </mdb-accordion-item>
                      </mdb-accordion>
                    </ul>
                  </mdb-accordion-item-body>
                </mdb-accordion-item>
              </mdb-accordion>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>
      </mdb-accordion>
    </ul>
  </li>
  <!--/. Side navigation links -->
  <div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->

You can work individually on different accordions styles.

Hope it helps!

Best, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No