Topic: Sidenav category won't expand

jasonh priority asked 1 year ago

Expected behavior

"Category 1" expand to show the links.

Actual behavior

Nothing happens when clicking "Category 1". No compiler errors or messages in browser console.

If I set the ul class to "sidenav-collapse show" then Link 1 and 2 appear, but will not collapse when clicking the Category.

The same issue happens when using the basic example from the documentation, without any changes.

Resources (screenshots, code snippets etc.)

Here is the relevant code from mdb-sidenav:

    <a class="sidenav-link"><i class="fas fa-grin fa-fw me-3 pe-1"></i><span slim="false">Category 1</span></a>
    <ul class="sidenav-collapse" mdbCollapse>
      <li class="sidenav-item"><a href="/page1" class="sidenav-link">Link 1</a></li>
      <li class="sidenav-item"><a href="/page2" class="sidenav-link">Link 2</a></li>

Michał Duszak staff answered 1 year ago

Hello, have you properly imported Collapse module? It's neccessary to import it in your app.module.ts in order to work

import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
@NgModule ({
  imports: [MdbCollapseModule],

Also, please remove the show class from the .sidenav-collapse element and add [collapsed]="false" binding instead.

jasonh priority commented 1 year ago

Thanks, this fixed it! I didn't see the docs mention anything about requiring that module - but I think the clue is that "mdbCollapse" is in the .

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.2.0
  • Device: PC
  • Browser: Edge 103
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No