How to implement mdb-side-nav with multi level menu?

Dear Wanderson,

It's easy to achieve such functionality. Just nest mdb-accordion-item element inside one of existing mdb-accordion-item-body element, and that's all.

But please remember that, if you want to create nested sidenav with accordions, the accordion from sidenav need to have [multiple]="true" input, otherwise if you'll open the nested mdb-accordion-item element, it's parent will close.

Please take a look at below code:

<!--Double navigation-->
<header>
  <!-- Sidebar navigation -->
  <mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true">

    <mdb-navbar-brand>
      <!-- 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 -->
    </mdb-navbar-brand>

    <links>
      <!--Social-->
      <li>
        <ul class="social">
          <li><a class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
          <li><a class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
          <li><a class="icons-sm gplus-ic"><i class="fab fa-google-plus"> </i></a></li>
          <li><a class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
        </ul>
      </li>
      <!--/Social-->
      <!--Search Form-->
      <li>
        <form class="search-form" role="search">
          <div class="form-group md-form mt-0 pt-1" 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 [multiple]="true" aria-multiselectable="false">

            <!-- Collapsible link -->
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect><i class="fas fa-chevron-right"></i> Collapsible menu
              </mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" mdbWavesEffect>Link 1</a></li>
                  <li>
                    <!-- Collapsible link -->
                    <mdb-accordion-item>
                      <mdb-accordion-item-head mdbWavesEffect><i class="fas fa-chevron-right"></i> Collapsible menu
                      </mdb-accordion-item-head>
                      <mdb-accordion-item-body>
                        <ul>
                          <li><a href="#" mdbWavesEffect>Nested Link 1</a></li>
                          <li><a href="#" mdbWavesEffect>Nested Link 2</a></li>
                        </ul>
                      </mdb-accordion-item-body>
                    </mdb-accordion-item>
                  </li>
                  <li><a href="#" mdbWavesEffect>Link 2</a></li>
                </ul>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Simple link -->
            <mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect><i class="far fa-hand-pointer"></i> Simple link
              </mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Collapsible link -->
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect><i class="far fa-eye"></i> Collapsible menu 2
              </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>

            <!-- Simple link -->
            <mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect><i class="far fa-gem"></i> Simple link 2</mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
            </mdb-accordion-item>

          </mdb-accordion>
        </ul>
      </li>
      <!--/. Side navigation links -->
    </links>
    <div class="sidenav-bg mask-strong"></div>
  </mdb-side-nav>
  <!--/. Sidebar navigation -->

  <!-- Navbar -->
  <mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"
              [containerInside]="false">

    <navlinks class="navbar-container">
      <!-- SideNav slide-out button -->
      <div class="float-left">
        <a (click)="sidenav.show()" class="button-collapse"><i class="fas fa-bars"></i></a>
      </div>
      <!--/. SideNav slide-out button -->
    </navlinks>

    <mdb-navbar-brand>
      <!-- Breadcrumb-->
      <div class="breadcrumbs breadcrumb-dn mr-auto">
        <p>Material Design for Bootstrap</p>
      </div>
      <!--/. Breadcrumb-->
    </mdb-navbar-brand>

    <navlinks>
      <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="fas fa-envelope"></i> <span
            class="clearfix d-none d-sm-inline-block">Contact</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="far fa-comments"></i> <span
            class="clearfix d-none d-sm-inline-block">Support</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="fas fa-user"></i> <span
            class="clearfix d-none d-sm-inline-block">Account</span></a>
        </li>
        <li class="nav-item dropdown btn-group" dropdown>
          <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
            Dropdown
          </a>
          <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </navlinks>
  </mdb-navbar>
  <!--/. Navbar -->

</header>
<!--/.Double navigation-->

<!--Main Layout-->
<main>
  <div class="container-fluid mt-5">
    <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
    <br>
    <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
    <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>
    <div style="height: 2000px"></div>
  </div>
</main>
<!--/Main layout-->

Best Regards,

Damian