README

An extended bootstrap Nav widget for Yii Framework 2 with submenu drilldown. This widget extends the \yii\bootstrap\Nav widget for Bootstrap 3.x and \yii\bootstrap4\Nav widget for Bootstrap 4.x \yii\bootstrap5\Nav widget for Bootstrap 5.x with some additional controls and adding the CSS Styles 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 extension uses the one of the following Dropdown Class extensions by default for rendering dropdown navigation, but this can be overridden:

\kartik\dropdown\DropdownX for Bootstrap 3.x
\kartik\bs4dropdown\Dropdown for Bootstrap 4.x
\kartik\bs5dropdown\Dropdown for Bootstrap 5.x

Demo

You can see detailed documentation on usage of the extension.

Installation

Install the dependencies depending on the Bootstrap version used in your app:

For Bootstrap 3.x install kartik-v/yii2-dropdown-x

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

For Bootstrap 4.x install kartik-v/yii2-bootstrap4-dropdown

$ php composer.phar require kartik-v/yii2-bootstrap4-dropdown "@dev"

For Bootstrap 5.x install kartik-v/yii2-bootstrap5-dropdown

$ php composer.phar require kartik-v/yii2-bootstrap5-dropdown "@dev"

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-nav-x "@dev"

or add

"kartik-v/yii2-nav-x": "@dev"

to the require section of your composer.json file.

Usage

NavX

use kartik\nav\NavX;
echo NavX::widget([
    'options' => ['class' => 'nav nav-pills'],
    'items' => [
        ['label' => 'Action', 'url' => '#'],
        ['label' => 'Submenu', 'items' => [
            ['label' => 'Action', 'url' => '#'],
            ['label' => 'Another action', 'url' => '#'],
            ['label' => 'Something else here', 'url' => '#'],
        ]],
        ['label' => 'Something else here', 'url' => '#'],
        '<li class="divider"></li>',
        ['label' => 'Separated link', 'url' => '#'],
    ],
    'encodeLabels' => false
]);

License

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

kartik-v / yii2-nav-x

Maintainers

Details