Skip to content
GitLab

Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)

Merged Administrator requested to merge github/fork/pvdlg/nav-scrollspy into v4-dev

Created by: pvdlg

Fixes #20451 (closed), fixes #19736 (closed), fixes #21223 (closed), fixes #18566 (closed), fixes #18409 (closed), fixes #20620 (closed), fixes #20156 (closed).

The intent in v4 is to support two type of markup for .nav, tab, scrollspy:

  • The "<ul> markup":
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Item</a>
  </li>
</ul>
  • The "<nav> markup":
<nav class="nav">
    <a class="nav-link" href="#">Item</a>
</nav>

This PR provide the necessary fixes:

  • Make scrollspy works with both markup. It is not dependent of .nav-item or <li> anymore
  • Add corresponding unit tests
  • Fix .active .nav-link for both markup broken here
  • Fix .nav-justified for both markup that was broken for "<nav> markup"
  • Fix .nav-fill for both markup that was broken for "<nav> markup"
  • Clarify scrollspy docs to mention both markup and that .nav-link receives the .active class
  • Add a new scrollspy example in the docs with nested .nav-links
  • Make tabs scss works with both <nav> and <ul> markup
  • Make tabs plugin works with both markup. It is not dependent anymore of .nav-item or <li>, <a> etc...
  • Revert PR #21756 to handle list-group with tabs in a more simple way with less specific class dependencies
  • Fix tabs pane transition detection that was using an unnecessary additional selector
  • Add example in docs for Tabs with JS with both markup
  • Add examples for tab pills and tab pills vertical

In addition it adds the support of scrollspy and tab to 'list-group (per request in #20620 (closed)):

  • Change tab plugin to support .list-group
  • Add tab example and documentation in list-group page
  • Add unit test
  • Change scrollspy plugin to support .list-group
  • Add scrollspy example and documentation
  • Add unit test

Both tab and scrollspy plugin now only depends on:

  • Having.nav or 'list-group class on the parent or sub-parent in case of nested navs
  • Having .nav-link or .list-group-item anywhere within to add the .active
  • No other markup structure / element / class is necessary, allowing the maximum of flexibility