Yii 2 Nav X

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-widgets 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-nav-x package is an extended bootstrap Nav widget for Yii Framework 2 with submenu drilldown. This widget extends the \yii\bootstrap\Nav widget 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 \kartik\dropdown\DropdownX extension by default for rendering dropdown navigation, but this can be overridden.

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

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

or add:

"kartik-v/yii2-nav-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 Nav X widget supports all the parameters similar to the \yii\bootstrap\Nav widget. In addition, the widget allows you to configure the following properties:
  • dropdownClass: string the class name to render the Dropdown items. Defaults to \kartik\dropdown\DropdownX. The widget will throw an exception if you are using this widget and not installed the yii2-dropdown-x extension.

  • dropdownOptions: array the widget options for the dropdown widget chosen above.

  • dropdownIndicator: string the caret indicator to display for dropdowns in the Nav. Defaults to ' <span class="caret"></span>'

Note

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


Check the Yii Demos section on the Navbar at the top of this page, to understand the usage of NavX widget with Navbar.

Usage with bootstrap navbar.
use kartik\nav\NavX;

// Usage with bootstrap nav pills.
echo NavX::widget([
    'options'=>['class'=>'nav nav-pills'],
    'items' => [
        ['label' => 'Action', 'url' => '#'],
        ['label' => 'Submenu 1', 'active'=>true, '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' => '#'],
    ]
]);

// Usage with bootstrap navbar
use yii\bootstrap\NavBar;
NavBar::begin($navBarOptions);
echo NavX::widget([
    'options' => ['class' => 'navbar-nav'],
    'items' => $items,
    'activateParents' => true,
    'encodeLabels' => false
]);
NavBar::end();

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