Extra Light Plugin for Bootstrap's Nav Component

Bootstrap Nav Paginator is a lightweight plug-in for Bootstrap’s Navigation component. Designed to improve the user experience when dealing with high-volume navigation.

bootstrap horizontal scrolling tabs, scrollable tabs bootstrap 4, responsive scrollable tabs, bootstrap tabs mobile scroll, bootstrap tab content scrollable

How to make use of it:

1. Upload the Bootstrap Nav Paginator plugin to your Bootstrap page.

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/bootstrap-nav-paginator.jquery.min.js"></script>
<!-- As A Vanilla JS Plugin -->
<script src="/path/to/js/bootstrap-nav-paginator.min.js"></script>

2. Configure the BsNavPaginator plug-in and specify the number of tabs and pills to display per page.

<ul id="nav-tabs" class="nav nav-tabs nav-fill">
  <li class="nav-item">
    <button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-bnp-1">Tab 1</button>
  </li>
  <li class="nav-item">
    <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-bnp-2">Tab 2</button>
  </li>
  <li class="nav-item">
    <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-bnp-3">Tab 3</button>
  </li>
  ... more tabs ...
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="tab-bnp-1" role="tabpanel">
    Tabbed Content 1
  </div>
  <div class="tab-pane fade" id="tab-bnp-2" role="tabpanel">
    Tabbed Content 2
  </div>
  <div class="tab-pane fade" id="tab-bnp-3" role="tabpanel">
    Tabbed Content 3
  </div>
  ... more tabbed content ...
</div>

// As A jQuery Plugin
$("#nav-tabs").BsNavPaginator(5, "nav-link");
// As A Vanilla JS Plugin
document.querySelector("#nav-tabs").BsNavPaginator(5, "nav-link");

Scrollable Bootstrap Tabs & Pills, Bootstrap Nav Paginator Plugin/Github, bootstrap tabs with scroll arrows, bootstrap tabs vertical scroll