Flexible jQuery Tabbed Interface Plugin - SmartTab

File Size: 293 KB
Views Total: 15524
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Flexible jQuery Tabbed Interface Plugin - SmartTab

SmartTab is a powerful and highly customizable jQuery plugin for creating tabbed interface with cool animation effects.

It supports ajax contents, Keyboard Navigation, Bootstrap 5, third-party CSS animations libraries, and is compatible with all major browsers.

How to use it:

1.  Include jQuery library and the SmartTab.js script on the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery.smartTab.js"></script>

2. Include the needed stylesheet on the web page. All possible themes:

  • Default
  • Blocks
  • Brick
  • Elite
  • Forge
  • Pills
<!-- All in one -->
<link href="/path/to/dist/css/smart_tab_all.min.css" rel="stylesheet" />

<!-- Default Theme -->
<link href="/path/to/dist/css/smart_tab.min.css" rel="stylesheet" />

<!-- Blocks Theme -->
<link href="/path/to/dist/css/smart_tab_blocks.min.css" rel="stylesheet" />

<!-- Brick Theme -->
<link href="/path/to/dist/css/smart_tab_brick.min.css" rel="stylesheet" />

<!-- Elite Theme -->
<link href="/path/to/dist/css/smart_tab_elite.min.css" rel="stylesheet" />

<!-- Forge Theme -->
<link href="/path/to/dist/css/smart_tab_forge.min.css" rel="stylesheet" />

<!-- Bootstrap Pills Theme -->
<link href="/path/to/dist/css/smart_tab_pills.min.css" rel="stylesheet" />

3. The required markup structure for the tabbed interface.

<div id="smarttab">

  <!-- Tabs -->
  <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

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

4. Call the plugin on the ton container and done.


5. Customize the plugin with the following options.


  // Selected Tab, 0 = first tab
  selected: 0,  

  // theme name
  theme: 'default',

  // Justified layout for tabs
  justified: true,

  // Auto adjust content height
  autoAdjustHeight: true,

  // Supports for Back button
  backButtonSupport: true,
  // Enables URL hash
  enableURLhash: true,
  // Configs animations here
  transition: {

    // Animation effect on navigation
    // none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
    animation: 'none',
    // Animation speed.
    speed: '400',
    // Easing function.
    // Requires jQuery easing plugin
    easing: '',
    // Only used if animation is 'css'
    prefixCss: '',
    fwdShowCss: '',
    fwdHideCss: '',
    bckShowCss: '',
    bckHideCss: '',


  // Auto switches between tabs
  autoProgress: {
    // enable
    enabled: false,
    // interval in ms
    interval: 3500,

    // stop on focus
    stopOnFocus: true


  // Keyboard navigation
  keyboardSettings: {

    // enable
    keyNavigation: true,

    // keycodes
    keyLeft: [37, 38],
    keyRight: [39, 40],
    keyHome: [36],
    keyEnd: [35],


  // CSS Class settings
  style: {
    mainCss: 'st',
    navCss: 'nav',
    navLinkCss: 'nav-link',
    contentCss: 'tab-content',
    contentPanelCss: 'tab-pane',
    themePrefixCss: 'st-theme-',
    justifiedCss: 'st-justified',
    anchorDefaultCss: 'default',
    anchorActiveCss: 'active',
    loaderCss: 'st-loading'

  // Callback function for content loading
  getContent: null,


6. Override the default CSS variables to create your own styles.

:root {
  --st-background: unset,
  --st-border: 1px solid #eeeeee,
  --st-anchor-default-primary-color: #f8f9fa;
  --st-anchor-default-secondary-color: #b0b0b1;
  --st-anchor-active-primary-color: #009EF7;
  --st-anchor-active-secondary-color: #ffffff;
  --st-anchor-disabled-primary-color: #f8f9fa;
  --st-anchor-disabled-secondary-color: #dbe0e5;
  --st-loader-color: #009EF7;
  --st-loader-background-color: #f8f9fa;
  --st-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);

7. API methods.

// goto the next tab

// back to the previous tab

// goto the first tab

// goto the last tab

// reset tabs

// goto a specific tab
$('#smarttab').smartTab("goToTab", 3);

// update options
$('#smarttab').smartTab("setOptions", options);

// get options

// get the tab info

// show/hide the loading animation
$('#smarttab').smartTab("loader", "show");
$('#smarttab').smartTab("loader", "hide");

// adjust the content height of the current step

More Examples:


v4.0.2 (2022-07-31)

  • Fixed: Fast navigation result in improper page selection
  • Changed: Code improvements

v4.0.1 (2022-07-11)

  • Added: Support for jQuery Slim version
  • Added: Public function fixHeight. 
  • Added: Public function getInfo to get tab index and tota tabs. 
  • Added: goToTab function with force parameter. 
  • Added: New themes
  • Added: Colors are changable dynamically using CSS variables.
  • Added: Bootstrap 5 support
  • Added: initialized event . 
  • Added: Move CSS class names to options
  • Added: Transition animations can be extended
  • Added: CSS Animations support on transition animations. Supports Animate.css
  • Changed: JavaScript and CSS code is rewritten
  • Changed: Imporoved all CSS themes
  • Changed: Made most of the options can changed with setOptions function
  • Changed: Rewritten option names and properties with minimal and meaningful names
  • Changed: Improved transition animations
  • Removed: Dark mode is removed. Added CSS variable support to change any colors.
  • Removed: Removed orientation option, instead add st-vertical CSS class to the main element


  • v3.1.1: a few optimizations


  • v3.0.1: init method optimized


  • v3.0 All new tab.
  • Updated doc.


  • update.

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