The yii2-dropdown-x package enables to render a toggleable dropdown menu styled for Bootstrap 3.x 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.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
The yii2-dropdown-x extension can be installed automatically or manually using one of these options:
Installation via Composer is the recommended and most easy option to install Krajee Yii2 extensions. You can install yii2-dropdown-x via composer package manager. Either run:
$ php composer.phar require kartik-v/yii2-dropdown-x "dev-master"
or add:
"kartik-v/yii2-dropdown-x": "dev-master"
to your application's composer.json file.
You may also manually install the extension to your project (in case your composer install does not work). Just download the source ZIP or TAR ball and extract the extension asset files and folders into your project. You may need to install dependencies manually and also set the namespaces to the extensions in your Yii2 extensions configurations manually.
The DropdownX widget supports all the parameters similar to the \yii\bootstrap\Dropdown widget with enhancements for submenu drilldown. Refer the source widget documentation for details. The widget supports the following additional property:
submenuSettings: array, the settings for the dropdown submenu.
DropdownX widget, 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('Dropdown Left <span class="caret"></span></button>',
['type'=>'button', 'class'=>'btn btn-default btn-outline-secondary', '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 text-end dropdown']); // align right
echo Html::button('Dropdown Right <span class="caret"></span></button>',
['type'=>'button', 'class'=>'btn btn-default btn-outline-secondary', '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.
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.