Navigation links have no active appearance inside Nav components

[webJose]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

There is no contribution to the hyperlink's style from the active class, as verified by the browser's developer tools.

This can be seen in the official documentation: Navs and Tabs

Just locate the link labeled Active, and inspect it. Now browse the list of classes in the Style tab in developer tools. It can be seen that active is not contributing anything.

Reduced test cases

Taken from the documentation, this is the first example:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

v5.3.3

[mironovsergey]

This behavior is intentional — the plain .nav style doesn’t include a visual distinction for .nav-link.active.
A related discussion can be found in #39882

[webJose]

I see. Thanks for the information. It is very strange that if this is the case, the examples contain the active class. If no contribution comes from it, it should not be listed in the list of classes. It only adds confusion.

Docs should remove it from the examples, but in all honesty, I'd like to see actual styling being applied.