Dear @tmeyer@suddath.com

The below code works for me fine. Please try to add the routerLink and routerLinkActive directives on the mdb-accordion-item-head element:

<mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect routerLink="test-route" routerLinkActive="active"><i class="far fa-hand-pointer"></i> Simple link
              </mdb-accordion-item-head>
              <mdb-accordion-item-body ></mdb-accordion-item-body>
            </mdb-accordion-item>

Best Regards,

Damian

<mdb-accordion-item class="no-collase">
                 <mdb-accordion-item-head mdbWavesEffect>
                       <mdb-icon fas icon="fas fa-home" class="mr-1 dark-link"></mdb-icon>
                       <span class="dark-link">Home</span>
                 </mdb-accordion-item-head>
                 <mdb-accordion-item-body>
                 </mdb-accordion-item-body>
              </mdb-accordion-item>

Thanks Damian. Yes, that works as it should on my side also. But do you get the same results when implementing routerLinkActive in the accordion below?

Sure, please take a look at the below code:

.html:

<!--Double navigation-->
<header>
  <!-- Sidebar navigation -->
  <mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true">

    <mdb-navbar-brand>
      <!-- Logo -->
      <li>
        <div class="logo-wrapper waves-light">
          <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
        </div>
      </li>
      <!--/. Logo -->
    </mdb-navbar-brand>

    <links>
      <!--Social-->
      <li>
        <ul class="social">
          <li><a class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
          <li><a class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
          <li><a class="icons-sm gplus-ic"><i class="fab fa-google-plus"> </i></a></li>
          <li><a class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
        </ul>
      </li>
      <!--/Social-->
      <!--Search Form-->
      <li>
        <form class="search-form" role="search">
          <div class="form-group md-form mt-0 pt-1" mdbWavesEffect>
            <input type="text" class="form-control" placeholder="Search">
          </div>
        </form>
      </li>
      <!--/.Search Form-->
      <!-- 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="fas fa-chevron-right"></i> Collapsible menu
              </mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" routerLink="test-route" routerLinkActive="active" mdbWavesEffect>Link 1</a></li>
                  <li><a href="#" 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="far fa-hand-pointer"></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="far fa-eye"></i> Collapsible menu 2
              </mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" mdbWavesEffect>Link 1</a></li>
                  <li><a href="#" 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="far fa-gem"></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 -->
    </links>
    <div class="sidenav-bg mask-strong"></div>
  </mdb-side-nav>
  <!--/. Sidebar navigation -->

  <!-- Navbar -->
  <mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"
              [containerInside]="false">

    <navlinks class="navbar-container">
      <!-- SideNav slide-out button -->
      <div class="float-left">
        <a (click)="sidenav.show()" class="button-collapse"><i class="fas fa-bars"></i></a>
      </div>
      <!--/. SideNav slide-out button -->
    </navlinks>

    <mdb-navbar-brand>
      <!-- Breadcrumb-->
      <div class="breadcrumbs breadcrumb-dn mr-auto">
        <p>Material Design for Bootstrap</p>
      </div>
      <!--/. Breadcrumb-->
    </mdb-navbar-brand>

    <navlinks>
      <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="fas fa-envelope"></i> <span
            class="clearfix d-none d-sm-inline-block">Contact</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="far fa-comments"></i> <span
            class="clearfix d-none d-sm-inline-block">Support</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="fas fa-user"></i> <span
            class="clearfix d-none d-sm-inline-block">Account</span></a>
        </li>
        <li class="nav-item dropdown btn-group" dropdown>
          <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
            Dropdown
          </a>
          <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </navlinks>
  </mdb-navbar>
  <!--/. Navbar -->

</header>
<!--/.Double navigation-->

<!--Main Layout-->
<main>
  <div class="container-fluid mt-5">
    <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
    <br>
    <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
    <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>
    <div style="height: 2000px"></div>
  </div>
</main>
<!--/Main layout-->

.scss:

mdb-accordion-item-head.active a h5 {
  color: red !important;
  background-color: yellow !important;
}

// Change nested active links appearance
mdb-accordion-item-body a.active {
  color: red !important;
  background-color: yellow !important;
}

.app.module.ts:

const routes: Routes = [
  {path: 'test-route', component: AppComponent}
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModulesPro.forRoot(),
    ToastModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
  providers: [MDBSpinningPreloader, ToastService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Please notice, that I have only added routerLink and routerLinkActive to the first link in the first accordion.

Please copy this code into your app, and open browser at localhost:4200/test-route, and you'll see that the first link is highlighted.

Best Regards,

Damian

Hello Damian, thank you for verifying that routerLinkActive works as it should on your end. I have added the additional styles which are responsible for highlighting an active link within the global styles.scss stylesheet.

.side-nav {

.collapsible { .card { .card-header { a { &:hover { background-image: linear-gradient(to right, rgba(88,89,91,1) 0%,rgba(136,138,140,0) 100%); } } } &.active {

mdb-accordion-item-head { background-image: linear-gradient(to right, rgba(88,89,91,1) 0%,rgba(136,138,140,0) 100%);

    }
    .card-header {
      a {
        h5 {
          font-weight: 300;
        }
      }
    }
    .dark-link {
      color: #E3E5E7;
    }
  }
}

} }

These styles work when the links have been clicked I'm just not getting an active link on the initial load. May I see how routerLink and routerLinkActive were implemented on your end to verify?