jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs

jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs
File Size: 86.7 KB
Views Total: 49646
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A tiny jQuery plugin for responsive Bootstrap 3/4 tabs component that makes your Bootstrap tab navigation scrollable when there's no enough screen space to display all tabs.

See also:

Basic usage:

1. Load both jquery.scrolling-tabs.min.css and jquery.scrolling-tabs.min.js in your Bootstrap web project like this:

<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">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>


3. Just call the function on the tab navigation and you're done.


4. You're also allowed to add tabs data via JavaScript like this:

var tabsData = [
  { paneId: 'tab01', title: 'Tab <em>1</em> of 12', content: 'Tab Number 1 Content', active: true, disabled: false },
  { paneId: 'tab02', title: 'Tab 2 of 12', content: 'Tab Number 2 Content', active: false, disabled: false },
  { paneId: 'tab03', title: 'Tab 3 of 12', content: 'Tab Number 3 Content', active: false, disabled: false },
  { paneId: 'tab04', title: 'Tab 4 of 12', content: 'Tab Number 4 Content', active: false, disabled: false },
  { paneId: 'tab05', title: 'Tab 5 of 12', content: 'Tab Number 5 Content', active: false, disabled: false }

  tabs: tabsData

5. Default plugin options.


  // 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 methods.

// destroy the plugin

// refresh the plugin

// scroll to the active tab

7. The plugin triggers event 'ready.scrtabs' when the tabs have been wrapped in the scroller and are ready for viewing:

  .on('ready.scrtabs', function() {
   // tabs ready, do my other stuff...

  .scrollingTabs({ tabs: tabs })
  .on('ready.scrtabs', function() {
   // tabs ready, do my other stuff...

8. Destroying:



v2.6.1 (2019-04-05)

  • Fixes an issue in which a tab clicked before you invoke the scrollingTabs plugin on the tabs will no longer be clickable after the plugin is invoked.

v2.6.0 (2019-03-05)

  • Add handleDelayedScrollbar option


  • Use constant for click-target class


  • Add tabsPostProcessors feature



  • Fix scrollToActiveTab for RTL mode


  • Added RTL support.


  • Fix window resize when multiple instances on page


  • Control swiping via code rather than scrollbar


  • Fix tab disabled toggle not working


  • Add leftArrowContent, rightArrowContent options


  • Enable swiping


  • Revert from boundingClientRect to $.outerWidth()


  • prevent multiple window resize event listeners


  • allow override scss variables


  • add arrow class option


  • add tab click callback option


  • add touchstart and touchend support


  • fixing some width and position issues


  • hide scroll arrows on page load if they are not needed


  • add scrollToActiveTab method


  • add support for tabs with dropdowns


  • Add disableScrollArrowsOnFullyScrolled option


  • hide tabs and scroller till rendering is complete


  • Allow force refresh on static tabs also, not just data-driven tabs

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