b-nav-item-dropdown active state

In Bootstrap NavBar, an active class can be set on the a tag which is a direct sibling of the li tag in order to mark the dropdown as active (indicating that any of its sibling pages is currently in view). See image below

Notice the Lang dropdown? The rendered markup is provided below

<li class="nav-item b-nav-dropdown dropdown">
  <a
    href="#"
    aria-haspopup="true"
    aria-expanded="false"
    class="nav-link dropdown-toggle active"
  >
    <span>Lang</span>
  </a>
  <div
    tabindex="-1"
    class="dropdown-menu dropdown-menu-right"
    aria-labelledby="__BVID__212__BV_button_"
  >
    <a role="menuitem" target="_self" href="#" class="dropdown-item">EN</a>
    <a role="menuitem" target="_self" href="#" class="dropdown-item">ES</a>
    <a role="menuitem" target="_self" href="#" class="dropdown-item">RU</a>
    <a role="menuitem" target="_self" href="#" class="dropdown-item">FA</a>
  </div>
</li>

How can this same behaviour be replicated using Bootstrap-Vue? Because I don’t see this anywhere in the docs.

<b-nav-item-dropdown text="Profile" right>
  <b-dropdown-item :to="{ name: 'Timeline' }">
    Timeline
  </b-dropdown-item>
  <b-dropdown-item :to="{ name: 'Edit' }">Edit</b-dropdown-item>
</b-nav-item-dropdown>

[MoonCheung]

🙂 :extra-toggle-classes was scrapped, now :toggle-class is props instead of implementing ternary expressions

[simioluwatomi]

Thanks for your quick response. For future reference, this was what worked for me

:extra-toggle-classes="$route.name === 'foobar' ? 'active' : ''"

This [extra-toggle-classes="$route.name === 'foobar' ? 'active' : '"] applied all the text as a class attribute.

But then, if more b-dropdown-items are added, this would become unwieldy as I would need to check for each route name. Is there a way to have an inclusive match that would apply the active class for any route under that dropdown? I set-up the routes like so /b-nav-item-dropdown/b-dropdown-item.

Once again, thanks for your time.