Bootstrap: Scrollspy and active item/link

[Turqueso]

Scrollspy adds active class to nav-link. It even says it requires Bootstrap nav component. But in the Bootstrap nav component docs mark up has active in nav-item.

Seems confusing, I tought my scrollspy was not working since mas link styling was depending on .nav-item.active and took my a while to figure it out. Shouldn't this be consistent or add a note to the docs?

[bassjobsen]

i think the active class should set on the nav-item so this is not only a docs issue.

[Turqueso]

@iqbalaqaba I don't see how it relates... besides we are talking about v4 not v3

[wkurosawa]

I agree with @bassjobsen, seems more semantic and also resembles v3 behaviour.

[wkurosawa]

@cvrebert any thoughts on this? I could work on a PR to add class active on nav-item instead of nav-link and update tests.

[bardiharborow]

Current PRs for this issue are #17770, #18163, #20304, #20587. I'll take this and do a review when I get a chance.

[mr-july]

Any progress? Actually this is the only problem, which compels me to use custom bootstrap build. :-(

[pvdlg]

X-ref #21807

[robinwilson16]

It looks like this is closed but the active class is still only applied to nav-link and not nav-item where the CSS is applied by default so whilst it is working, it has no effect.
Does this not mean the issue is still unresolved or have I missed something?

It should change to:

<li class="nav-item active">
  <a class="nav-link" href="#Anchor">Description</a>
</li>

But instead it does:

<li class="nav-item">
  <a class="nav-link active" href="#Anchor">Description</a>
</li>

[markmorris]

This is still an issue, seems well silly when looking through docs and putting a nav together the active class is on nav-item, but then on scrollspy it applies to nav-link only. Backwards

[robinwilson16]

@markmorris Yes shame it is not fixed when the original issue was logged back in 2016 over 3 years ago. Hopefully it is a simple bug that can be fixed by someone. To avoid breaking workarounds people may have employed themselves maybe it could set active to both nav-item and nav-link and then remove the incorrect one in a future version.

[Johann-S]

Can you update a fresh new issue @markmorris or @robinwilson16 with a live test using our latest release (v4.3.1) ?

[petref]

still active an nav-link instead of nav-item.