Topic: Sidenav not auto-expanding based on routerlink

Tobias premium asked 2 years ago

*Expected behavior*Sidenav menu should expand automatically on matched routerlink

*Actual behavior*Menu is not expanding. However, when menu is clicked you can see that the menu-item indeed has the active class set, simply just not visible.

Resources (screenshots, code snippets etc.)

<a class="sidenav-link"><i class="fas fa-cubes fa-fw fa-lg me-3"></i>Accounts</a>
<ul class="sidenav-collapse" mdbCollapse>
    <li class="sidenav-item"><a class="sidenav-link" [routerLink]="['/accounts/request']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" mdbWavesEffect><i class="fa fa-cube me-1"></i>Request account</a></li>
    <li class="sidenav-item"><a class="sidenav-link" [routerLink]="['/accounts']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" mdbWavesEffect><i class="fa fa-cog me-1"></i>Manage accounts</a></li>

I'm on v5 beta 8 at the moment, as I could see in the changelog that there was a fix in this particular area. Coud you please share an example on how this is supposed to work, as there is no such thing in the Sidenav documentation?

Arkadiusz Idzikowski staff commented 2 years ago

@Tobias It looks like the code you use is correct. We will try to reproduce the problem on our end and let you know what we found.

Tobias premium commented 2 years ago

I'm a bit confused. I got a mail yesterday where it says that this question has been answered. This was the answer:

"i found the a solution... we need set a function with router on typescript."

Following the link to here did not show the answer? Anyhow, as I didn't fully understand the above statement, could you please ellaborate, @andrea_rmes?

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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No