The flexible jQuery tab control plugin

v3.1.1 2020-06-14 15:17 UTC


The flexible jQuery tab control plugin

Build Status npm version Latest Stable Version GitHub license Donate on Paypal

Smart Tab is a flexible and heavily customizable jQuery Tab control plugin.

If you think it is cool, you should also check it's sibling React Smart Tab



jQuery Smart Tab default

jQuery Smart Tab dark

jQuery Smart Tab tabs

jQuery Smart Tab brick


  • jQuery (supports from jQuery-1.11.1+ to the latest jQuery-3.5.0)



npm install jquery-smarttab


yarn add jquery-smarttab


composer require techlab/jquery-smarttab

CDN - jsDelivr

<!-- CSS -->
<link href="" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="" type="text/javascript"></script>


<!-- CSS -->
<link href="" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="" type="text/javascript"></script>


Download from GitHub


  • Responsive design
  • Standalone CSS
  • Bootstrap compatible
  • Various themes included
  • Customizable CSS
  • Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
  • URL navigation and tab selection
  • Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
  • Auto content height adjustment
  • Auto Progress (automatic navigation of tabs)
  • Ajax content loading support
  • Keyboard navigation
  • External anchor support
  • Custom events
  • Supports all modern browsers
  • Easy to implement and minimal HTML required


Include jQuery SmartTab CSS

<link href="../dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

Include HTML

<div id="smarttab">

    <ul class="nav">
          <a class="nav-link" href="#tab-1">
            Tab 1
          <a class="nav-link" href="#tab-2">
            Tab 2
          <a class="nav-link" href="#tab-3">
            Tab 3
          <a class="nav-link" href="#tab-4">
            Tab 4

    <div class="tab-content">
        <div id="tab-1" class="tab-pane" role="tabpanel">
            Tab content
        <div id="tab-2" class="tab-pane" role="tabpanel">
            Tab content
        <div id="tab-3" class="tab-pane" role="tabpanel">
            Tab content
        <div id="tab-4" class="tab-pane" role="tabpanel">
            Tab content

Include jQuery (ignore this if you have already included on the page).

<script src=""></script>

Include jQuery SmartTab JavaScript

<script type="text/javascript" src="../dist/js/jquery.smartTab.min.js"></script>

Initialize the jQuery SmartTab

<script type="text/javascript">

      // SmartTab initialize


That's it!

Please see the documentation for more details on implementation and usage.

All options
// SmartTab initialize
    selected: 0, // Initial selected tab, 0 = first tab
    theme: 'default', // theme for the tab, related css need to include for other than default theme
    orientation: 'horizontal', // Nav menu orientation. horizontal/vertical
    justified: true, // Nav menu justification. true/false
    autoAdjustHeight: true, // Automatically adjust content height
    backButtonSupport: true, // Enable the back button support
    enableURLhash: true, // Enable selection of the tab based on url hash
    transition: {
        animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
        speed: '400', // Transion animation speed
        easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
    autoProgress: { // Auto navigate tabs on interval
        enabled: false, // Enable/Disable Auto navigation
        interval: 3500, // Auto navigate Interval (used only if "autoProgress" is enabled)
        stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
    keyboardSettings: {
        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
        keyLeft: [37], // Left key code
        keyRight: [39] // Right key code


MIT License


If you like the project please support with your contribution.

Donate on Paypal

Thank you and Happy Coding!