Topic: Nested Multi Level Menu within MDB Angular Side Bar Nav
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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