Использование виджетов Nav и Navbar в Yii 2.x

Для создания навигации на сайте, разработанном на Yii, используем виджеты 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']
                    ],
            ],
        ]);
    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>
    

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    Vkontakte