Для создания навигации на сайте, разработанном на 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>