Side nav item not active on initial load

Topic: Side nav item not active on initial load

Tim Meyer free asked 5 years ago

*_Expected behavior_*When adding routerLinkActive="active" the class "active" is set on the item and should take the style of of an active link.

*_Actual behavior_*The class "active" is set on the active link. but is not taking the style assigned on initial load unless the link has been clicked.

Resources (screenshots, code snippets etc.)

<links>
        <!-- Side navigation links -->
        <li>
            <ul class="collapsible collapsible-accordion">
                <mdb-accordion [multiple]="false" aria-multiselectable="false">
                    <!-- home -->
                    <a>
                    <mdb-accordion-item class="no-collase">
                        <mdb-accordion-item-head mdbWavesEffect routerLink="ui/landing/home" routerLinkActive="active">
                            <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>


                    <!-- Dashboard -->
                    <mdb-accordion-item class="no-collase">
                        <mdb-accordion-item-head mdbWavesEffect routerLink="apps/dashboard/my-dash">
                            <mdb-icon fas icon="fas fa-tachometer-alt" class="mr-1 dark-link"></mdb-icon>
                            <span class="dark-link">Dashboard</span>
                        </mdb-accordion-item-head>
                        <mdb-accordion-item-body></mdb-accordion-item-body>
                    </mdb-accordion-item>

                    <!-- Shipment Tracking -->
                    <mdb-accordion-item class="no-collase" *ngIf="hasTransfereeRole">
                        <mdb-accordion-item-head mdbWavesEffect routerLink="apps/tracker/shipments">
                            <mdb-icon fas icon="fas fa-globe" class="mr-1 dark-link"></mdb-icon>
                            <span class="dark-link">Transferee Portal</span>
                        </mdb-accordion-item-head>
                        <mdb-accordion-item-body></mdb-accordion-item-body>
                    </mdb-accordion-item>
                </mdb-accordion>
            </ul>
        </li>

Bartłomiej Malanowski staff commented 5 years ago

Are you sure this should be asked in the jQuery category? Please move your question to the right category - MDB Angular

Damian Gemza staff commented 5 years ago

Dear @tmeyer@suddath.com

Could you please specify, where did you add the additional styles which are responsible for highlighting an active link?

The styles should be added to the global styles.scss stylesheet.

I have tried to reproduce your problem with the blank Double Nav example with added routerLink and routerLinkActive directives, and for me, the picked route is highlighted and opened after initial load.

Best Regards,

Damian

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Tim Meyer free answered 5 years ago

0 0 Best answer

<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>

Add comment

Tim Meyer free answered 5 years ago

0 0 Best answer

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?

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Sure, please take a look at the below code:</p>

<mdb-navbar-brand>
      
      <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>
      
    </mdb-navbar-brand>

<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>

<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>

<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>

<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>
      
    </links>
    <div class="sidenav-bg mask-strong"></div>
  </mdb-side-nav>

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

<mdb-navbar-brand>
      
      <div class="breadcrumbs breadcrumb-dn mr-auto">
        <p>Material Design for Bootstrap</p>
      </div>
      
    </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>

</header>

<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>

</code></pre>

<pre class="prettyprint"><code>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;
}
</code></pre>

<p>.app.module.ts:</p>

<pre class="prettyprint"><code>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 {
}
</code></pre>

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

<p>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.</p>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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

Add comment

Tim Meyer free answered 5 years ago

0 0 Best answer

<p>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.</p>

<p>.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 {</p>

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

<pre class="prettyprint" data-initialized="true" data-gclp-id="2"><code>    }
    .card-header {
      a {
        h5 {
          font-weight: 300;
        }
      }
    }
    .dark-link {
      color: #E3E5E7;
    }
  }
}
</code></pre>

<p>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? </p>

Please insert min. 20 characters.

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?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.5.1
Device: Dell
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Tim Meyer

60Support score
4Questions 4Answers 0Snippets