Navbar multiple submenues / levels

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 ?

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear <a href="/profile/?id=49341" rel="nofollow">@it@strong.tv</a>

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.
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">

<li>

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

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect> Collapsible menu</mdb-accordion-item-head>

<mdb-accordion-item-body>

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

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect> Collapsible menu</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

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

<mdb-accordion-item-head mdbWavesEffect> Simple link</mdb-accordion-item-head>

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

</mdb-accordion-item>

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect> Collapsible menu 2</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

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

<mdb-accordion-item-head mdbWavesEffect> 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>

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

<mdb-accordion-item-head mdbWavesEffect> Simple link</mdb-accordion-item-head>

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

</mdb-accordion-item>

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect> Collapsible menu 2</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

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

<mdb-accordion-item-head mdbWavesEffect> Simple link 2</mdb-accordion-item-head>

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

</mdb-accordion-item>

</mdb-accordion>

</ul>

</li>

</pre>
</div>
Best Regards,

Damian

Best Regards,

Damian

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

it@strong.tv

Pro User 67Support score
7Questions 3Answers 1Snippets