Extra Light Plugin for Bootstrap’s Nav Component | BsNavPaginator

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.

Which file to include?

Bootstrap ☞ bootstrap-nav-paginator.js or bootstrap-nav-paginator.min.js

Bootstrap + JQuery ☞ bootstrap-nav-paginator.jquery.js or bootstrap-nav-paginator.jquery.min.js

Must Read – ARIA-friendly Pagination Component With Sliding Window for Vue

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");

Read More –

A Simple Pagination Component for Angular Applications
A Pure Javascript Class for Paginating of DOM elements | purePajinate


See Demo And Download

Official Website(Robszyy): Click Here

This superior jQuery/javascript plugin is developed by Robszyy. For extra Advanced Usage, please go to the official website.

Share