The yii2-bootstrap5-dropdown package enables to render a toggleable dropdown menu styled for Bootstrap 5.x with drilldown submenus.
This widget extends the \yii\bootstrap5\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-bootstrap5-dropdown 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-bootstrap5-dropdown via composer package manager. Either run:
$ php composer.phar require kartik-v/yii2-bootstrap5-dropdown "dev-master"
or add:
"kartik-v/yii2-bootstrap5-dropdown": "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 kartik\bs5dropdown\Dropdown widget supports all the parameters similar to the \yii\bootstrap5\Dropdown widget with enhancements for submenu drilldown. Refer the source widget documentation for
details.
Dropdown widget, you must enclose your dropdown target element within a container with class dropdown.
The kartik\bs5dropdown\ButtonDropdown widget supports all the parameters similar to the \yii\bootstrap5\ButtonDropdown widget with enhancements for submenu drilldown. Refer the source widget documentation for
details.
The kartik\bs5dropdown\ButtonDropdown widget includes the following enhanced / overridden setting:
dropdownClass: string, the class for rendering the Dropdown widget. Defaults to kartik\bs5dropdown\Dropdown.
\kartik\bs5dropdown\Dropdown with \yii\bootstrap5\NavBar.
\kartik\bs5dropdown\Dropdown) on any HTML element
(e.g. span).
\kartik\bs5dropdown\ButtonDropdown).
use kartik\bs5dropdown\Dropdown;
use kartik\bs5dropdown\ButtonDropdown;
use yii\helpers\Html;
use yii\bootstrap5\NavBar;
use yii\bootstrap5\Nav;
// Usage of Bootstrap 5 dropdown with bootstrap 5 NavBar
NavBar::begin([
'brandLabel' => 'NavBar',
'brandOptions' => ['class'=>'p-0'],
'options' => ['class' => 'navbar navbar-expand-lg navbar-light', 'style' => 'background-color: #e3f2fd']
]);
echo Nav::widget([
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Section 1', 'url' => '/'],
['label' => 'Section 2', 'url' => '#'],
[
'label' => 'Section 3',
'items' => [
['label' => 'Section 3.1', 'url' => '/'],
['label' => 'Section 3.2', 'url' => '#'],
[
'label' => 'Section 3.3',
'items' => [
['label' => 'Section 3.3.1', 'url' => '/'],
['label' => 'Section 3.3.2', 'url' => '#'],
],
],
],
],
],
],
['label' => 'About', 'url' => ['/site/about']],
],
'dropdownClass' => Dropdown::class, // use the custom dropdown
'options' => ['class' => 'navbar-nav mr-auto me-auto'],
]);
NavBar::end();
// Configuring the Bootstrap 5 Dropdown widget
echo Html::tag('span', 'Dropdown Span', [
'id' => 'dropdownMenuButton',
'class' => 'btn btn-link text-info dropdown-toggle',
'data-bs-toggle' => 'dropdown',
'aria-haspopup' => 'true',
'aria-expanded' => 'false'
]);
echo Dropdown::widget([
'items' => [
['label' => 'Section 1', 'url' => '/'],
['label' => 'Section 2', 'url' => '#'],
[
'label' => 'Section 3',
'items' => [
['label' => 'Section 3.1', 'url' => '/'],
['label' => 'Section 3.2', 'url' => '#'],
[
'label' => 'Section 3.3',
'items' => [
['label' => 'Section 3.3.1', 'url' => '/'],
['label' => 'Section 3.3.2', 'url' => '#'],
],
],
],
],
],
'options' => ['aria-labelledby' => 'dropdownMenuButton']
]);
// Configuring the Bootstrap 5 Button Dropdown widget
echo ButtonDropdown::widget([
'label' => 'Button Dropdown',
'dropdown' => [
'items' => [
['label' => 'Action', 'url' => '#'],
['label' => 'Submenu 1', 'items' => [
['label' => 'Action', 'url' => '#'],
['label' => 'Another action', 'url' => '#'],
['label' => 'Something else here', 'url' => '#'],
'<div class="dropdown-divider"></div>',
['label' => 'Submenu 2', 'items' => [
['label' => 'Action', 'url' => '#'],
['label' => 'Another action', 'url' => '#'],
['label' => 'Something else here', 'url' => '#'],
'<div class="dropdown-divider"></div>',
['label' => 'Separated link', 'url' => '#'],
]],
]],
['label' => 'Something else here', 'url' => '#'],
'<div class="dropdown-divider"></div>',
['label' => 'Separated link', 'url' => '#'],
],
],
'buttonOptions' => ['class' => 'btn-outline-secondary']
]);
yii2-bootstrap5-dropdown 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.