Yii2 navbar button placement problem

Hello,

I am not sure I understand how to place the buttons correctly on the navbar.

I am trying to create single buttons and button dropdown but the dropdown are showing to the left of the navbar and are looking very different from the single buttons, please see this picture:

Any idea how to get the dropdown buttons of a similar look than the other single buttons and also aligned.

I have followed the code from the manual here:

http://www.yiiframework.com/doc-2.0/yii-bootstrap-buttondropdown.html

Here is my current code:




<?php


/* @var $this \yii\web\View */

/* @var $content string */


use backend\assets\AppAsset;

use yii\helpers\Html;

use yii\bootstrap\Nav;

use yii\bootstrap\NavBar;

use yii\widgets\Breadcrumbs;

use common\widgets\Alert;

use yii\bootstrap\ButtonDropdown;


AppAsset::register($this);

?>

<?php $this->beginPage() ?>

<!DOCTYPE html>

<html lang="<?= Yii::$app->language ?>">

<head>

    <meta charset="<?= Yii::$app->charset ?>">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <?= Html::csrfMetaTags() ?>

    <title><?= Html::encode($this->title) ?></title>

    <?php $this->head() ?>

</head>

<body>

<?php $this->beginBody() ?>


<div class="wrap">

    <?php

    NavBar::begin([

        'brandLabel' => '',

        'brandUrl' => Yii::$app->homeUrl,

        'options' => [

            'class' => 'navbar navbar-default navbar-fixed-top',

        ],

    ]);

    $menuItems = [

        ['label' => 'Home', 'url' => ['/site/index']],

    ];

    if (Yii::$app->user->isGuest) {

        $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];

    } else {

        $menuItems[] = [

            'label' => 'Logout (' . Yii::$app->user->identity->username . ')',

            'url' => ['/site/logout'],

            'linkOptions' => ['data-method' => 'post'] 

        ];




###############################MY NEW DROPDOWN#########################################

         echo ButtonDropdown::widget([

    'label' => 'Action',

    'dropdown' => [

        'items' => [

            ['label' => 'DropdownA', 'url' => '/url1'],

            ['label' => 'DropdownB', 'url' => '/url2'],

        ],

    ],

]);   

###############################MY NEW DROPDOWN#########################################     

        

    }

    


    echo Nav::widget([

        'options' => ['class' => 'navbar-nav navbar-right'],

        'items' => $menuItems,

    ]);

    NavBar::end();

    ?>


    <div class="container">

        <?= Breadcrumbs::widget([

            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],

        ]) ?>

        <?= Alert::widget() ?>

        <?= $content ?>

    </div>

</div>


<footer class="footer">

    <div class="container">

        <p class="pull-left">&copy; My Company <?= date('Y') ?></p>


        <p class="pull-right"><?= Yii::powered() ?></p>

    </div>

</footer>


<?php $this->endBody() ?>

</body>

</html>

<?php $this->endPage() ?>




Thank you




$menuItems[] = [

  'label' => 'Action',

  'items' => [

	['label' => 'DropdownA', 'url' => '/url1'],

	['label' => 'DropdownB', 'url' => '/url2'],

  ],

];



http://www.yiiframework.com/doc-2.0/yii-bootstrap-nav.html