Topic: SideNav keeps item active after click on other one

Przemysław Ciąćka free asked 5 years ago


Prerequsites

1) Two simple link items in sidenav menu
2) Click one of the items to make it active (lets name it the first clicked menu item).

Expected behavior: When you click other item, the first clicked menu item should be unmarked as active and currently clicked should be marked as active.

Current behavior: Both items are marked as active.

Observations: When both are marked as active, when you click the first clicked menu item and the other one again, then the first clicked menu item is unmarked as active.

Example code

<mdb-side-nav class="fixed" #sidenav [fixed]="true">
<li>
<ul class="collapsible collapsible-accordion">
<mdb-accordion [multiple]="false" aria-multiselectable="false">
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-dashboard"></i> Dashboard</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>

<mdb-accordion [multiple]="false" aria-multiselectable="false">
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head routerLink="/groups" routerLinkActive="active"><i class="fa fa-object-group"></i> Groups</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
</ul>
</li>
<div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>

Filip Kapusta premium answered 5 years ago


Hello, please make sure that you're using MDB Pro package with this component.

According to our system your account is using the free version of MDB, if the license was bought for a team please contact the person in your team managing the purchasing account. The package should be accessible for logged PRO accounts under this link: https://mdbootstrap.com/profile/my-orders/

If your team needs separate access for every user, please reach out to m.leciejewski@mdbootstrap.com with GitLab accounts request.


Arkadiusz Idzikowski staff answered 5 years ago


Thank you for the detailed information, we will take a closer look at this problem.

Please try to add [routerLinkActiveOptions]="{ exact: true }" as a temporary solution.

Mdb-sidenav is a pro component and according to our system you use free version. Please send a number of your order to a.idzikowski@mdbootstrap.com and we will fix this problem.


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Safari, Chrome
  • OS: Mac OS X
  • Provided sample code: Yes
  • Provided link: No