Topic: Side nav item not active on initial load
*_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>
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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.scssstylesheet.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