Topic: how to highlight active nav-item?
A beginner question...
How do I highlight the active nav-link so that it is clearly visible to the end user?
In the example shown below 'Tasks' is the active routerlink, but you can't see that from the nav bar display
Here is the code...
<ul class="nav justify-content-center lighten-4 ">
<li class="nav-item" routerLinkActive="active" style="margin-left: 20px; margin-right: 20px">
<a class="nav-link" [routerLink]="['tasks']"><h5><b>Tasks</b></h5></a>
</li>
<li class="nav-item" routerLinkActive="active" style="margin-left: 20px; margin-right: 20px">
<a class="nav-link" [routerLink]="['habits']"><h5><b>Habits</b></h5></a>
</li>
<li class="nav-item" routerLinkActive="active" style="margin-left: 20px; margin-right: 20px">
<a class="nav-link" [routerLink]="['projects']"><h5><b>Projects</b></h5></a>
</li>
<li class="nav-item" routerLinkActive="active" style="margin-left: 20px; margin-right: 20px">
<a class="nav-link " [routerLink]="['goals']"><h5><b>Goals</b></h5></a>
</li>
<li class="nav-item" routerLinkActive="active" style="margin-left: 20px; margin-right: 20px">
<a class="nav-link" [routerLink]="['dashboard']"><h5><b>Dashboard</b></h5></a>
</li>
</ul>
Hi @davout,
the property routerLinkActive adds class when specific path is active. For example, add these styles for your project:
.active {
color: red;
font-weight:bool;
}
more info about routerLinkActive: https://angular.io/api/router/RouterLinkActive
Ankita Singh commented 2 months ago
On click of arrow to go back or forward in browser the navigation links become active as expected. But is there a way to call the onclick event function of the links when it becomes active? Or is there a way to detect a change in navbar active tab?
Arkadiusz Idzikowski staff commented 2 months ago
The routerLinkActive directive should update the active state of the element also when you click on a specific link.
You can use (click) event on navigation links to detect if they were clicked.
Ankita Singh commented 2 months ago
Hi, thanks for addressing. I need to understand if the user clicks on the back/forward button in the browser toolbar and the navigation link changes to previous selected value. Is there a way to capture the change in typescript (other than router.events subscription)?
Arkadiusz Idzikowski staff commented 2 months ago
@Ankita Singh If you use routerLinkActive it should detect route change even on browser back/forward navigation and update the active item accordingly. I think the easier way would be to subscribe to router events, another way could be to use MutationObserver API to observe class change on specific element/elements.
Answered
- User: Free
- Premium support: No
- Technology: Angular
- MDB Version: 9.3.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No