Scrollable Bootstrap Tabs & Pills - BsNavPaginator

Scrollable Bootstrap Tabs & Pills  - BsNavPaginator
File Size: 26.3 KB
Views Total: 227
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.