Yii2 : Create custom menu

Question

I had constructed a bootstrap menu and now I want to reproduce it with Yii2 Nav widget. So, here is the initial state:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">BrandLogo</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" aria-expanded="true">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#1" class="current">simple menu</a>
                </li>
                <li class="dropdown">
                    <a href="#4">dropdown menu <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#2">Submenu#1</a>
                        </li>
                        <li>
                            <a href="#3">Submenu#2</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" action="/action_page.php">
                <div class="form-group has-feedback search">
                    <input type="text" class="form-control" placeholder="Search" />
                    <i class="glyphicon glyphicon-search form-control-feedback"></i>
                </div>
            </form>
        </div>
    </div>
</nav>

And here is how it looks like:

Now I would like to do the same menu with Nav widget. Here is the code:

NavBar::begin([
    'brandLabel' => 'BrandLogo',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse',
    ],
]);

$menuItems = [
    [
        'label' => 'simple menu',
        'url' => ['#1']
    ],
    [
        'label' => 'dropdown menu',
        'url' => ['#4'],
        'items' => [
            [
                'label' => 'Submenu#1',
                'url' => ['#1'],
            ],
            [
                'label' => 'Submenu#2',
                'url' => ['#2'],
            ],
        ]
    ],
    [
        'label' => '
            <form class="navbar-form navbar-left" action="/action_page.php">
                <div class="form-group has-feedback search">
                    <input type="text" class="form-control" placeholder="Search" />
                    <i class="glyphicon glyphicon-search form-control-feedback"></i>
                </div>
            </form>',
        'encode' => false,
        'url' => false,
    ],
];


if (count($menuItems)) {
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav'],
        'items' => $menuItems,
    ]);
}

NavBar::end();

The problem is that the results aren't equal. I found a few problems:

1. The widget generates dropdown link as <a class="dropdown-toggle" href="/main/#4" data-toggle="dropdown">dropdown menu <span class="caret"></span></a> How can I get rid of data-toggle="dropdown" and class="dropdown-toggle"?
2. The search form is wrapped into <a></a> tags. That is why the navbar is broken: How can I get rid of the unnecessary tag?

Answer 1

That is because you are not following the actual HTML structure, and according to that you need to add the form after the ul not inside the li, but that form should be part of the NavBar and if you look into the defination

Any content enclosed between the \yii\bootstrap\begin() and \yii\bootstrap\end() calls of NavBar is treated as the content of the navbar. You may use widgets such as yii\bootstrap\Nav or \yii\widgets\Menu to build up such content.

so just move your form outside the $items after you are calling the Nav::widget() and before you call the NavBar::end().

And you can use the linkOptions to customize or remove the class or any other attribute related to the link

<?php
NavBar::begin([
    'brandLabel' => 'BrandLogo',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse',
    ],
]);

$menuItems = [
    [
        'label' => 'simple menu',
        'url' => ['#1']
    ],
    [
        'label' => 'dropdown menu',
        'url' => ['#4'],
        'linkOptions' => [
            'class' => 'my-class',
            'data' => [
                'toggle' => ''
            ]
        ],
        'items' => [
            [
                'label' => 'Submenu#1',
                'url' => ['#1'],
            ],
            [
                'label' => 'Submenu#2',
                'url' => ['#2'],
            ],
        ]
    ],
];


if( count($menuItems) ){
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav'],
        'items' => $menuItems,
    ]);
}
?>
<form class="navbar-form navbar-left" action="/action_page.php">
    <div class="form-group has-feedback search">
        <input type="text" class="form-control" placeholder="Search" />
        <i class="glyphicon glyphicon-search form-control-feedback"></i>
    </div>
</form>
<?php
NavBar::end();

EDIT

if you are looking to completly remove the class name dropdown-toggle then you might have to override the yii\bootstrap\Nav::renderItems() by extending the widget because it is added by default as the bootstrap class so you have to just copy the renderItems() to your extended class and comment out the line Html::addCssClass ( $linkOptions , [ 'widget' => 'dropdown-toggle' ] ); which adds the class there and then change the namespace where you are calling the Nav from yii\bootstrap\Nav::widget() to common\components\Nav::widget()

Add the following class in your common\components\ or if you plan to copy it somewhere else do update the namespace in the code

<?php

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

namespace common\components;

use yii\bootstrap\Nav as BaseNav;
use yii\bootstrap\Html;
use yii\helpers\ArrayHelper;
use yii\base\InvalidConfigException;

class Nav extends BaseNav {

    /**
     * Renders a widget's item.
     * @param string|array $item the item to render.
     * @return string the rendering result.
     * @throws InvalidConfigException
     */
    public function renderItem($item) {
        if( is_string($item) ){
            return $item;
        }
        if( !isset($item['label']) ){
            throw new InvalidConfigException("The 'label' option is required.");
        }
        $encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels;
        $label = $encodeLabel ? Html::encode($item['label']) : $item['label'];
        $options = ArrayHelper::getValue($item, 'options', []);
        $items = ArrayHelper::getValue($item, 'items');
        $url = ArrayHelper::getValue($item, 'url', '#');
        $linkOptions = ArrayHelper::getValue($item, 'linkOptions', []);

        if( isset($item['active']) ){
            $active = ArrayHelper::remove($item, 'active', false);
        } else{
            $active = $this->isItemActive($item);
        }

        if( empty($items) ){
            $items = '';
        } else{
            $linkOptions['data-toggle'] = 'dropdown';
            Html::addCssClass($options, ['widget' => 'dropdown']);
//            Html::addCssClass ( $linkOptions , [ 'widget' => 'dropdown-toggle' ] );
            if( $this->dropDownCaret !== '' ){
                $label .= ' ' . $this->dropDownCaret;
            }
            if( is_array($items) ){
                $items = $this->isChildActive($items, $active);
                $items = $this->renderDropdown($items, $item);
            }
        }

        if( $active ){
            Html::addCssClass($options, 'active');
        }

        return Html::tag('li', Html::a($label, $url, $linkOptions) . $items, $options);
    }

}