Press "Enter" to skip to content

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.

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

See Demo And Download

Official Website(Robszyy): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.