Yii 2 Dropdown X

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-krajee-base extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The yii2-dropdown-x package enables to render a toggleable dropdown menu styled for Bootstrap 3 with drilldown submenus. This widget extends the \yii\bootstrap\Dropdown widget with some additional controls and adds CSS and JS for enabling a submenu drilldown. The dropdown menu style is optimized for both desktop and mobile devices. The drilldown is triggered on active instead of hover so that it works equally well on mobile devices.

The preferred way to install this extension is through composer. Either run:

$ php composer.phar require kartik-v/yii2-dropdown-x "*"

or add:

"kartik-v/yii2-dropdown-x": "*"

to the require section of your composer.json file. Then run:

php composer.phar update

to get the updated package on your application install.

The Dropdown X widget supports all the parameters similar to the \yii\bootstrap\Dropdown widget. In addition, the widget allows you to configure the following properties:
  • subMenuOptions: array the HTML attributes that can be set for all sub menus. This can be overridden at the item options level

Note

You must enclose your dropdown target element within a container with class dropdown.

use kartik\dropdown\DropdownX;
use yii\helpers\Html;

echo Html::beginTag('div', ['class'=>'dropdown']);
echo Html::button('Click Dropdown <span class="caret"></span></button>', 
    ['type'=>'button', 'class'=>'btn btn-default', 'data-toggle'=>'dropdown']);
echo DropdownX::widget([
    'items' => [
        ['label' => 'Action', 'url' => '#'],
        ['label' => 'Submenu 1', 'items' => [
            ['label' => 'Action', 'url' => '#'],
            ['label' => 'Another action', 'url' => '#'],
            ['label' => 'Something else here', 'url' => '#'],
            '<li class="divider"></li>',
            ['label' => 'Submenu 2', 'items' => [
                ['label' => 'Action', 'url' => '#'],
                ['label' => 'Another action', 'url' => '#'],
                ['label' => 'Something else here', 'url' => '#'],
                '<li class="divider"></li>',
                ['label' => 'Separated link', 'url' => '#'],
            ]],
        ]],
        ['label' => 'Something else here', 'url' => '#'],
        '<li class="divider"></li>',
        ['label' => 'Separated link', 'url' => '#'],
    ],
]); 
echo Html::endTag('div');


echo Html::beginTag('div', ['class'=>'text-right dropdown']); // align right
echo Html::button('Dropdown Right <span class="caret"></span></button>', 
    ['type'=>'button', 'class'=>'btn btn-default', 'data-toggle'=>'dropdown']);
echo DropdownX::widget([
    'options'=>['class'=>'pull-right'], // for a right aligned dropdown menu
    'items' => [
        ['label' => 'Action', 'url' => '#'],
        ['label' => 'Submenu 1', 'items' => [
            ['label' => 'Action', 'url' => '#'],
            ['label' => 'Another action', 'url' => '#'],
            ['label' => 'Something else here', 'url' => '#'],
            '<li class="divider"></li>',
            ['label' => 'Submenu 2', 'items' => [
                ['label' => 'Action', 'url' => '#'],
                ['label' => 'Another action', 'url' => '#'],
                ['label' => 'Something else here', 'url' => '#'],
                '<li class="divider"></li>',
                ['label' => 'Separated link', 'url' => '#'],
            ]],
        ]],
        ['label' => 'Something else here', 'url' => '#'],
        '<li class="divider"></li>',
        ['label' => 'Separated link', 'url' => '#'],
    ],
]); 
echo Html::endTag('div');

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