Skip to content
Extended bootstrap tabbed navigation widget for Yii 2.0 with various alignment and styling options.
PHP JavaScript
Branch: master
Clone or download
Latest commit e5d49bb May 25, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Implement stale bot May 25, 2019
src Bump version release v1.2.8 Sep 27, 2018 Bump version release v1.2.8 Sep 27, 2018 Updates to release v1.2.5 Sep 4, 2018 Update README Nov 5, 2018
composer.json Bump version release v1.2.8 Sep 27, 2018

Krajee Logo

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 both Bootstrap 3.x and 4.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 for details.

You can’t perform that action at this time.