Topic: Sidenav routerLinkActive is behaving weird.

skota pro asked 4 years ago

Expected behavior

Only once item should be selected. When i refresh i see only one item selected. But when i select another, previous item is still selected.

Actual behaviorenter image description here

Resources (screenshots, code snippets etc.)

                    <!-- Collapsible link -->
                    <mdb-accordion-item *ngFor="let link of links" class="no-collase">
                        <mdb-accordion-item-head mdbWavesEffect [routerLink]="link.path" [routerLinkActive]="'active'">
                            <mdb-icon fas [icon]="link.icon"></mdb-icon> {{}}


Arkadiusz Idzikowski staff commented 4 years ago

Thank you for reporting this problem, we will take a closer look at that. Just to clarify - every accordion item have different routerLink path?

skota pro commented 4 years ago


Its because mdb-ac-item-body is missing.

When I fixed that, 95% active is being applied properly.

If I navigate to a page by clicking nav item, it works fine. But if I navigate to different route through code, having this issue.

For example, in RouteGuard, if the user is not logged in, I am going to the login screen.At this point, 2 links are getting active.

This could be an Angular issue also?

If you have any suggestions, please provide me.

Arkadiusz Idzikowski staff commented 4 years ago

How exactly do you change the route programatically? I tested that with this.router.navigate(['/route_name']) method and active link was updated correctly.

Which 2 links were highlighted in this case? It might be necessary to add [routerLinkActiveOptions]="{exact: true}" to the item that points to home ('/') route.

fartonheart free answered 4 years ago

How do i use sidenav in angular?

This link shows very ugly top down navigation where it says

Click on the images below to see live preview

all images show same sidenav I am still learning angular but themdb angular tutorials are not enough help to make sidenav.

Bartosz Termena staff commented 4 years ago


To use sidenav in angular just go here and copy the code to your project:

Hope it helps!

Best Regards, Bartosz.

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

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: Mac book pro
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No