kartik-v/yii2-tabs-x A supercharged Bootstrap tabs widget with ability to align tabs in multiple ways, add borders, rotated titles, and more.


Krajee Logo
yii2-tabs-x Donate       kartikv

Stable Version Untable Version License Total Downloads Monthly Downloads Daily Downloads

An extended tabs widget for Yii Framework 2 based on the bootstrap-tabs-x jQuery plugin by Krajee. This plugin includes various CSS3 styling enhancements and various tweaks to the core Bootstrap Tabs plugin. The extension supports Bootstrap 5.x or 4.x or 3.x library versions. It also helps you align tabs in multiple ways, add borders, achieve rotated/sideways titles, load tab content via ajax, and more.


The plugin offers these enhanced features:

  • Supports various tab opening directions: above (default), below, right, and left.
  • Allows you to box the tab content in a new bordered style. This can work with any of the tab directions above.
  • Allows you to align the entire tab content to the left (default), center, or right of the parent container/page.
  • Automatically align & format heights and widths for bordered tabs for right and left positions.
  • Allows a rotated sideways tab header orientation for the right and left tab directions.
  • Auto detect overflowing header labels for sideways orientation (with ellipsis styling) and display full label as a title on hover.


You can see detailed documentation and examples on usage of the extension.


The preferred way to install this extension is through composer.

NOTE: Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json.

Either run

$ php composer.phar require kartik-v/yii2-tabs-x "@dev"

or add

"kartik-v/yii2-tabs-x": "@dev"

to the require section of your composer.json file.



use kartik\tabs\TabsX;

echo TabsX::widget([
    'position' => TabsX::POS_ABOVE,
    'align' => TabsX::ALIGN_LEFT,
    'items' => [
            'label' => 'One',
            'content' => 'Anim pariatur cliche...',
            'active' => true
            'label' => 'Two',
            'content' => 'Anim pariatur cliche...',
            'headerOptions' => ['style'=>'font-weight:bold'],
            'options' => ['id' => 'myveryownID'],
            'label' => 'Dropdown',
            'items' => [
                     'label' => 'DropdownA',
                     'content' => 'DropdownA, Anim pariatur cliche...',
                     'label' => 'DropdownB',
                     'content' => 'DropdownB, Anim pariatur cliche...',

Sticky Tabs

You can provides pushState (back and forward button support) to Bootstrap tabs. You can enable or disable sticky tabs behaviour by setting enableStickyTabs property. This will use the jquery.stickytabs plugin to enable the sticky tabs push state behavior. If you want to change the sticky tabs plugin settings you can set the stickyTabsOptions property.

echo TabsX::widget([
    'enableStickyTabs' => true,
    'stickyTabsOptions' => [
        'selectorAttribute' => 'data-target',
        'backToTop' => true,
    'items' => [
    // ... items here


yii2-tabs-x is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.


Change Log: yii2-tabs-x

Version 1.2.9

Date: 15-Oct-2022

  • (enh #83, #84): Adds role="presentation" to list items.

Version 1.2.8

Date: 20-Sep-2021

  • (enh #74): Enhancements to support Bootstrap 5.x.
  • Bump up version.

Version 1.2.7

Date: 26-Sep-2018

  • Enhancements in parsing Bootstrap CSS classes (ref: kartik-v/yii2-krajee-base#100).

Version 1.2.6

Date: 10-Sep-2018

  • (bug #63): Correct and remove unnecessary bootstrap tabs plugin registration.

Version 1.2.5

Date: 06-Sep-2018

  • Updates to support Bootstrap 4.x.
  • Reorganize all source code in src directory.
  • (kartik-v/yii2-krajee-base#94): Refactor code and consolidate / optimize properties within traits.

Version 1.2.4

Date: 04-May-2017

  • (bug #47): Add missing hashVarLoadPosition property.

Version 1.2.3

Date: 09-Sep-2016

  • (enh #33): Add branch alias for dev-master latest release.
  • (enh #35): Correct README for sticky tabs options usage.
  • (enh #36, #37): Add printable tabs functionality.
  • (enh #41, #42): Better detection of click element for correct sticky tabs initialization.
  • Add github contribution and issue/PR logging templates.
  • Enhance PHP Documentation for all classes and methods in the extension.

Version 1.2.2

Date: 12-Jan-2016

  • (enh #29): Add support for pushState tabs via jquery.stickyTabs plugin.
  • (enh #31): Enhancements for PJAX based reinitialization. Complements enhancements in kartik-v/yii2-krajee-base#52 and kartik-v/yii2-krajee-base#53.

Version 1.2.1

Date: 26-Jun-2015

  • (enh #17): Add pluginOptions to better control TabsX.
  • (enh #20): Validate renderTabContent property to optionally render panes.
  • (enh #23): Enhance TabsX for yii\bootstrap\Tabs update.

Version 1.2.0

Date: 05-Mar-2015

  • (bug #5): Update renderDropdown for updated release of yii\bootstrap\Tabs.
  • Update packagist stats.
  • (enh #15): Add pluginEvents property to register TabsX events.
  • Set release to stable.
  • (enh #16): Parse boolean data attributes correctly in containerOptions.

Version 1.1.0

Date: 10-Nov-2014

  • Set dependency on Krajee base components
  • Set release to stable

Version 1.0.0

Date: 01-Aug-2014

  • Initial release
  • (bug #1): Use class with correct namespace for InvalidConfigException.
  • (enh #2): Make items content property optional.
  • PSR4 alias change


GitHub Stars
GitHub Forks



v1.2.9 is the latest of 12 releases

BSD-3-Clause license
30 github stars & 18 github forks
71 downloads in the last day
14718 downloads in the last 30 days
798396 total downloads