README

👁 Krajee Logo

yii2-bootstrap5-dropdown 👁 Donate
      👁 kartikv

👁 Stable Version
👁 Unstable Version
👁 License
👁 Total Downloads
👁 Monthly Downloads
👁 Daily Downloads

Enhanced Bootstrap 5.x dropdown widget for Yii2 framework with nested submenu support.

Docs & Demo

You can see detailed docs & demos and the API code documentation on usage of the extension.

Installation

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-bootstrap5-dropdown "@dev"

or add

"kartik-v/yii2-bootstrap5-dropdown": "@dev"

to the require section of your composer.json file.

Usage

Dropdown Menu NavBar

use yii\bootstrap5\NavBar;
use yii\bootstrap5\Nav;
use kartik\bs4dropdown\Dropdown;
use yii\helpers\Html;

NavBar::begin(['brandLabel' => 'NavBar Test']);
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::classname(), // use the custom dropdown
 'options' => ['class' => 'navbar-nav mr-auto'],
]);
NavBar::end();

<div class="dropdown">
 <?php
 echo Html::button('Dropdown Button', [
 'id' => 'dropdownMenuButton',
 'class' => 'btn btn-secondary dropdown-toggle'
 'data-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']
 ]);
 ?>
</div>

Dropdown Solo Button

<?php 
use \yii\helpers\Html;
use kartik\bs4dropdown\Dropdown;
?>
<div class="dropdown">
 <?php
 echo Html::button('Dropdown Button', [
 'id' => 'dropdownMenuButton',
 'class' => 'btn btn-secondary dropdown-toggle'
 'data-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']
 ]);
 ?>
</div>

Dropdown Button Alt (using ButtonDropdown)

use \yii\helpers\Html;
use kartik\bs4dropdown\ButtonDropdown;
echo ButtonDropdown::widget([
 'label' => 'Dropdown Button',
 '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' => '#'],
 ],
 ],
 ],
 ],
 ],
 ],
 'buttonOptions' => ['class'=>'btn-secondary']
]);

License

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