How do I get the active route to highlight on my navbar?

Question

In angular I'm trying to make sure the page I'm on is highlighted on the navbar - I thought this might have been native to the bootstrap nav I'm using but it doesn't seem to be working.

nav

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
    <a class="navbar-brand" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
      <a class="nav-link" [routerLink]="['/']" style="color:white"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
      <a class="nav-link" [routerLink]="['/results']" style="color:white"><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
      <a class="nav-link" [routerLink]="['/links']" style="color:white"><fa-icon [icon]="faLink"></fa-icon>  Links</a>
  </nav>

Is there a css script or something I can use to achieve this?

use `routerLinkActive` attribute, see https://angular.io/api/router/RouterLinkActive — Akash Shrivastava, Dec 10 '19 at 14:06
Does this answer your question? [In Angular, how do you determine the active route?](https://stackoverflow.com/questions/34323480/in-angular-how-do-you-determine-the-active-route) — igg, Dec 10 '19 at 14:10
Does this answer your question? [Angular5, setting active class for RouterLink](https://stackoverflow.com/questions/49300026/angular5-setting-active-class-for-routerlink) — Jake11, Dec 10 '19 at 14:10

score 16 · Accepted Answer · answered Dec 10 '19 at 14:08

Try using routerLinkActive, it adds a CSS class to the element when the route is active.

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
      <a class="navbar-brand" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
      <a class="nav-link" [routerLink]="['/']" [routerLinkActive]="['active']"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
      <a class="nav-link" [routerLink]="['/results']" [routerLinkActive]="['active']"><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
      <a class="nav-link" [routerLink]="['/links']" [routerLinkActive]="['active']"><fa-icon [icon]="faLink"></fa-icon>  Links</a>
</nav>

I suggest removing the inline css for color you added and let Bootstrap handle the colors with classes. active should work for the nav-link, but feel free to experiment. They are added as an array, so you can add more than 1.

score 5 · Answer 2 · answered Dec 10 '19 at 14:08

You need to add routerLinkActive attribute that'll add the class active to the link when active. This active class can have the styling you want to applied when the particular link is active.

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
    <a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/']" style="color:white"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" style="color:white"><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" style="color:white"><fa-icon [icon]="faLink"></fa-icon>  Links</a>
  </nav>

score 4 · Answer 3 · answered Dec 10 '19 at 14:09

4

You could do it with RouterLinkActive like so:

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

How do I get the active route to highlight on my navbar?

3 Answers3