Scrollable Bootstrap Tabs & Pills - BsNavPaginator

BsNavPaginator is jQuery/Vanilla JS plugin for making Bootstrap's Navs component fully responsive and mobile-friendly.

When you have a large number of tabs (pills) in a Bootstrap Navs component, the plugin allows to you scroll the tab bar horizontally to navigate between them.

Compatible with Bootstrap 5, Bootstrap 4, and Bootstrap 3.

See Also:

• jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs

How to use it:

1. Load the Bootstrap Nav Paginator plugin in 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. Initialize the BsNavPaginator plugin and determine how many tabs and pill 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");

Changelog:

2021-10-08

• Fixed Js / JQuery initialisation when an active tab is set on an other page than the first one

---

This awesome jQuery plugin is developed by Robszyy. For more Advanced Usages, please check the demo page or visit the official website.