Underline the selected navitem after open link in new tab

Question

I have a navbar that the selected/active navitem is recognizable by an orange underline. However, when I open another navitem in a new tab (by rightclick), the default navitem is underlined and not the selected one!

Here is my navbar:

<div>
  <ul>
    <a routerLink="/home">
      <button class="active" data-bs-toggle="tab">
        Home
      </button>
    </a>
    <a routerLink="/newTab">
      <button data-bs-toggle="tab">
        New Tab
      </button>
    </a>
  </ul>
<div>

and .scss:

.active {
    border-bottom-color: #f48024!important;    
}

I understand the home tab has active class by default, but is there anyway to catch which tab was selected in the previous tab?

Thank you in advance.

Answer 1

You should use routerLinkActive attribute which take in an input of the class name and automatically adds the class to the active route.

<div>
  <ul>
    <a routerLink="/home" routerLinkActive="active">
      <button data-bs-toggle="tab">
        Home
      </button>
    </a>
    <a routerLink="/newTab" routerLinkActive="active">
      <button data-bs-toggle="tab">
        New Tab
      </button>
    </a>
  </ul>
<div>

Then you can update the CSS to:

.active > button {
    border-bottom-color: #f48024!important;    
}