Press "Enter" to skip to content

jQuery Plugin To Make Bootstrap 4 Tabs Scroll Horizontally

Bootstrap4-scrolling-tabs jQuery plugin to make Bootstrap 4 Tabs move horizontally instead of wrapping. A small jQuery plugin for responsive Bootstrap 4 Tabs plugin that makes navigation in a Bootstrap tab scrollable when there isn’t enough screen space to display all the tabs.

It is based on Bootstrap 4 and jQuery 3. It uses CSS3 2D Transforms for scrolling, so be sure to check your browser compatibility.

bootstrap 4 horizontal scrolling tabs, scrollable tabs bootstrap, vertical scrolling tabs jquery, jquery bootstrap scrolling tabs npm, jquery bootstrap scrolling tabs CDN

How to make use of it:

1. Load each jquery.scrolling-tabs.min.css and jquery.scrolling-tabs.min.js in your Bootstrap.

<link href="jquery.scrolling-tabs.css" rel="stylesheet">
<script src="jquery.scrolling-tabs.js"></script>

2. Create tab navigation and tab panes following the native Bootstrap tabs’ markup structure.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="display: none">
  <li class="nav-item"><a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">Tab Number 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab2" role="tab" data-toggle="tab">Tab Number 2</a></li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-has="true" aria-expanded="false">Tab 3 Dropdown<span class=caret></span></a>
    <ul class="dropdown-menu">
      <li><a class="nav-link" href="#tab3a" role="tab" data-toggle="tab">Tab 3a</a></li>
      <li><a class="nav-link" href="#tab3b" role="tab" data-toggle="tab">Tab 3b</a></li>
      <li><a class="nav-link" href="#tab3c" role="tab" data-toggle="tab">Tab 3c</a></li>
      <li role="separator" class="divider"></li>
      <li><a class="nav-link" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item"><a class="nav-link" href="#tab4" role="tab" data-toggle="tab">Tab Number 4</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab5" role="tab" data-toggle="tab">Tab Number 5</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab6" role="tab" data-toggle="tab">Tab Number 6</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab7" role="tab" data-toggle="tab">Tab Number 7</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab8" role="tab" data-toggle="tab">Tab Number 8</a></li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tab 9 Dropdown<span class=caret></span></a>
    <div class="dropdown-menu">
      <a class="dropdown-item nav-link" href="#tab9a" role="tab" data-toggle="tab">Tab 9a</a>
      <a class="dropdown-item nav-link" href="#tab9b" role="tab" data-toggle="tab">Tab 9b</a>
      <a class="dropdown-item nav-link" href="#tab9c" role="tab" data-toggle="tab">Tab 9c</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="#tab10" role="tab" data-toggle="tab">Tab Number 10</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab11" role="tab" data-toggle="tab">Tab Number 11</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab12" role="tab" data-toggle="tab">Tab Number 12</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab13" role="tab" data-toggle="tab">Tab Number 13</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab14" role="tab" data-toggle="tab">Tab Number 14</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab15" role="tab" data-toggle="tab">Tab Number 15</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab16" role="tab" data-toggle="tab">Tab Number 16</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content" style="display: none">
  <div role="tabpanel" class="tab-pane fade show active" id="tab1">Tab 1 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab2">Tab 2 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3">Tab 3 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3a">Tab 3a content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3b">Tab 3b content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3c">Tab 3c content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab4">Tab 4 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab5">Tab 5 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab6">Tab 6 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab7">Tab 7 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab8">Tab 8 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9">Tab 9 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9a">Tab 9a content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9b">Tab 9b content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9c">Tab 9c content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab10">Tab 10 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab11">Tab 11 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab12">Tab 12 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab13">Tab 13 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab14">Tab 14 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab15">Tab 15 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab16">Tab 16 content...</div>
</div>

3. Just name the function on the tab navigation and also you’re completed.

$('.nav-tabs').scrollingTabs({
  // options here
});

4. You’re additionally allowed so as to add tabs information through JavaScript.

var tabs = [
    { paneId: 'tab00', tooltip: 'Custom Tooltip Tab 0',  title: 'Tab Index 0', content: 'Tab Index 0 Content', active: true, disabled: false },
    { paneId: 'tab01', tooltip: 'Custom Tooltip Tab 1',  title: 'Tab Index 1', content: 'Tab Index 1 Content', active: false, disabled: false },
    { paneId: 'tab02', tooltip: 'Custom Tooltip Tab 2',  title: 'Tab Index 2', content: 'Tab Index 2 Content', active: false, disabled: false },
    // ...
],

$('#tabs-container').scrollingTabs({
  tabs: tabs
});

5. Default plugin choices.

$('.nav-tabs').scrollingTabs({

  // tabs data array
  tabs: null,

  // name of your tab object's property name that corresponds to that required tab property if  your property name is different than the standard name (paneId, title, etc.)
  propPaneId: 'paneId',
  propTitle: 'title',
  propActive: 'active',
  propDisabled: 'disabled',
  propContent: 'content',

  // relevant for data-driven tabs only--set to true if you want the plugin to only touch the tabs and to not generate the tab pane elements that go in .tab-content. 
  // By default, the plugin will generate the tab panes based on the content property in your tab data, if a content property is present.
  ignoreTabPanes: false,

  // set to true if you want to force full-width tabs to display at the left scroll arrow. i.e., if the scrolling stops with only half a tab showing, it will snap the tab to its edge so the full tab shows.
  scrollToTabEdge: false,

  // On tabs data change, if you want the active tab to be set based on the updated tabs data (i.e., you want to override the current active tab setting selected by the user)
  forceActiveTab: false

  // set to true if you want the left scroll arrow to disable when the tabs are scrolled fully left, and the right scroll arrow to disable when the tabs are scrolled fully right.
  disableScrollArrowsOnFullyScrolled: false,

  // set to true if you want the left scroll arrow to slide the tabs left instead of right, and the right scroll arrow to slide the tabs right.
  reverseScroll: false,

  // set to a value less than 1 if you want the tabs container to be less than the full width of its parent element. 
  // For example, set it to 0.5 if you want the tabs container to be half the width of its parent.
  widthMultiplier: 1,

  // A callback function to execute any time a tab is clicked.
  // The function is simply passed as the event handler to jQuery's .on(), so the function will receive the jQuery event as an argument, and the 'this' inside the function will be the clicked tab's anchor element.
  tabClickHandler: null,

  // Arrow class options
  cssClassLeftArrow: 'glyphicon glyphicon-chevron-left',
  cssClassRightArrow: 'glyphicon glyphicon-chevron-right'

  // Custom HTML string for the left and right scroll arrows. 
  // This will override any custom cssClassLeftArrow and cssClassRightArrow settings.
  leftArrowContent: '',
  rightArrowContent: '',

  // Enable swiping?
  enableSwiping: false,

  // Enable RTL?
  enableRtlSupport: false,

  // Optional string array used to define custom HTML for each tab's <li> element. 
  // Each entry is an HTML string defining the tab <li> element for the corresponding tab in the tabs array.
  tabsLiContent: null,

  // Optional array of functions, each one associated with an entry in the tabs array. 
  // When a tab element has been created, its associated post-processor function will be called with two arguments: the newly created $li and $a jQuery elements for that tab.
  // This allows you to, for example, attach a custom event listener to each anchor tag.
  tabsPostProcessors: null,

  // Bootstrap version
  // 4 or 3
  bootstrapVersion: 3,

  // set to true if you experience a situation where the right scroll arrow wraps to the next line due to a vertical scrollbar coming into existence on the page after the plugin already calculated its width without a scrollbar present. 
  handleDelayedScrollbar: false
  
});

6. API strategies.

// destroy the plugin
$('#el').scrollingTabs('destroy');

// refresh the plugin
$('#el').scrollingTabs('refresh');

// scroll to the active tab
$('#el').scrollingTabs('scrollToActiveTab');

7. The plugin triggers occasion ‘ready.scrtabs’ when the tabs have been wrapped within the scroller.

$('.nav-tabs')
  .scrollingTabs()
  .on('ready.scrtabs', function() {
   // tabs ready, do my other stuff...
});

$('#tabs-inside-here')
  .scrollingTabs({ tabs: tabs })
  .on('ready.scrtabs', function() {
   // tabs ready, do my other stuff...
});

8. Destroy the plugin.

$('.nav-tabs').scrollingTabs('destroy');

jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs, bootstrap4 scrolling tabs Github, horizontal scrolling tabs jquery, jquery scrolling tabs js download, bootstrap horizontal tabs responsive


See Demo And Download

Official Website(mikejacobson): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *