Использование виджетов Nav и Navbar в Yii2

Для создания навигации на сайте используются виджеты Nav и Navbar. По своей структуре они мало чем отличаются от виджета Menu. Любой контент в навигационном меню заключаем между begin() и end(). Здесь мы можем использовать как виджет yii\bootstrap\Nav, так и yii\widgets\Menu.

Рассмотрим меню

NavBar::begin([ // отрываем виджет
        'brandLabel' => 'Моя организация', // название организации
        'brandUrl' => Yii::$app->homeUrl, // ссылка на главную страницу сайта
        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top', // стили главной панели
        ],
    ]);
        echo Nav::widget([
            'options' => ['class' => 'navbar-nav navbar-right'], // стили ul
            'items' => [
                ['label' => 'Главная', 'url' => ['/site/index']],
                ['label' => 'О компании', 'url' => ['/site/about']],
                ['label' => 'Услуги', 'url' => ['/site/services']],
                ['label' => 'Контакты', 'url' => ['/site/contacts']],
                Yii::$app->user->isGuest ? // Если пользователь гость, показыаем ссылку "Вход", если он авторизовался "Выход"
                    ['label' => 'Вход', 'url' => ['/site/login']] :
                    [
                        'label' => 'Выход (' . Yii::$app->user->identity->username . ')',
                        'url' => ['/site/logout'],
                        'linkOptions' => ['data-method' => 'post']
                    ],
            ],
            'encodeLabels' =>false,
        ]);
    NavBar::end(); // закрываем виджет

Исходный html код. На выходе мы видим не что иное, как обычный не нумерованный список.

<nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation">
        <div class="container"><div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse">
                <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="/web/index.php">Моя организация</a>
        </div>
        <div id="w0-collapse" class="collapse navbar-collapse">
            <ul id="w1" class="navbar-nav navbar-right nav">
                <li class="active"><a href="/web/index">Главная</a></li>
                <li><a href="/web/about">О компании</a></li>
                <li><a href="/web/services">Услуги</a></li>
                <li><a href="/web/contacts">Контакты</a></li>
                <li><a href="/web/login">Вход</a></li>
            </ul>
        </div>

Для Dropdown

echo Nav::widget([
    'items' => [
        [
            'label' => 'Home',
            'url' => ['site/index'],
            'linkOptions' => [...],
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                 ['label' => 'Level 1 - Dropdown A', 'url' => '#'],
                 '<li class="divider"></li>',
                 '<li class="dropdown-header">Dropdown Header</li>',
                 ['label' => 'Level 1 - Dropdown B', 'url' => '#'],
            ],
        ],
        [
            'label' => 'Login',
            'url' => ['site/login'],
            'visible' => Yii::$app->user->isGuest
        ],
    ],
    'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
]);

По мотивам – http://www.webapplex.ru/ispolzovanie-vidzhetov-nav-i-navbar-v-yii-2.x

• Главная
• Блог
• Использование виджетов Nav и Navbar в Yii2