Navbar multiple submenues / levels

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Navbar multiple submenues / levels

it@strong.tv pro asked 6 years ago

Is there a way to add multiple menu levels in the sidenav ?  

Damian Gemza staff answered 6 years ago

Dear @it@strong.tv There's a possibility to add a nested accordion in the side nav. Just copy the whole mdb-accordion code in one of existing mdb-accordion-item-body element, and that's all. Please check the below code. 
<!-- Side navigation links -->

<li>

<ul class="collapsible collapsible-accordion">

<mdb-accordion [multiple]="false"aria-multiselectable="false">

<!-- Collapsible link -->

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>

<mdb-accordion-item-body>

<mdb-accordion [multiple]="false"aria-multiselectable="false">

<!-- Collapsible link -->

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

<li><a href="#"class="waves-effect"mdbWavesEffect>Link 1</a></li>

<li><a href="#"class="waves-effect"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="fa fa-hand-pointer-o"></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="fa fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

<li><a href="#"class="waves-effect"mdbWavesEffect>Link 1</a></li>

<li><a href="#"class="waves-effect"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="fa fa-diamond"></i> Simple link 2</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

</mdb-accordion>

</mdb-accordion-item-body>

</mdb-accordion-item>

<!-- Simple link -->

<mdb-accordion-item class="no-collase">

<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-hand-pointer-o"></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="fa fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

<li><a href="#"class="waves-effect"mdbWavesEffect>Link 1</a></li>

<li><a href="#"class="waves-effect"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="fa fa-diamond"></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 -->
Best Regards, Damian Best Regards, Damian
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Any
  • Browser: Any
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
About author
it@strong.tv
Pro User
67Support score
7Questions 3Answers
0Snippets likes 1Snippets