Виджет Menu в Yii фреймворке 2.x

Многостраничный сайт использует в Yii 2.x виджет Menu. Рассмотрим несколько примеров, начнем с самого простого, и от примера к примеру начнем добавлять различные свойства и атрибуты меню.

Изначально добавляем следующее пространство имен, необходимое для подключения нашего виджета

use yii\widgets\Menu;

Простое меню

echo Menu::widget([
    'items' => [
        ['label' => 'Главная', 'url' => ['site/index']],
        ['label' => 'О компании', 'url' => ['site/about']],
        ['label' => 'Услуги', 'url' => ['site/services']],
        ['label' => 'Контакты', 'url' => ['site/contacts']],
    ],
]);

На выходе получаем следующий html код

    <ul>
        <li>
    		<a href="http://demo/web/site/index">Главная</a>
    	</li>
    	<li>
    		<a href="http://demo/web/site/about">О компании</a>
    	</li>
    	<li>
    		<a href="http://demo/web/site/services">Услуги</a>
    	</li>
    	<li>
    		<a href="http://demo/web/site/contacts">Контакты</a>
    	</li>	
    </ul>

Добавим дополнительные css классы к первому, последнему и активному элементу меню

echo Menu::widget([
    'items' => [
        ['label' => 'Главная', 'url' => ['site/index']],
        ['label' => 'О компании', 'url' => ['site/about']],
        ['label' => 'Услуги', 'url' => ['site/services']],
        ['label' => 'Контакты', 'url' => ['site/contacts']],
    ],
    'activeCssClass'=>'active',
    'firstItemCssClass'=>'fist',
    'lastItemCssClass' =>'last',
]);
    <ul>
        <li class="first">
    		<a href="http://demo/web/site/index">Главная</a>
    	</li>
    	<li class="active">
    		<a href="http://demo/web/site/about">О компании</a>
    	</li>
    	<li>
    		<a href="http://demo/web/site/services">Услуги</a>
    	</li>
    	<li class="last">
    		<a href="http://demo/web/site/contacts">Контакты</a>
    	</li>	
    </ul>

Рассмотрим свойство "options", позволяющее добавить различные стили, идентификаторы или атрибуты к тегу ul

echo Menu::widget([
    'items' => [
        ['label' => 'Главная', 'url' => ['site/index']],
        ['label' => 'О компании', 'url' => ['site/about']],
        ['label' => 'Услуги', 'url' => ['site/services']],
        ['label' => 'Контакты', 'url' => ['site/contacts']],
    ],
	'options' => [
					'id'=>'navid',
					'class' => 'navbar-nav',
					'style'=>'float: left; font-size: 16px;',
					'data'=>'menu',
				],
    'activeCssClass'=>'active',
    'firstItemCssClass'=>'fist',
    'lastItemCssClass' =>'last',
]);

На выходе получаем следующий html код:

    <ul id="navid" class="navbar-nav" style="float: left; font-size: 16px;" data="menu" >
        <li class="first">
    		<a href="http://demo/web/site/index">Главная</a>
    	</li>
    	<li class="active">
    		<a href="http://demo/web/site/about">О компании</a>
    	</li>
    	<li>
    		<a href="http://demo/web/site/services">Услуги</a>
    	</li>
    	<li class="last">
    		<a href="http://demo/web/site/contacts">Контакты</a>
    	</li >	
    </ul>

Добавим свой шаблон для ссылок

echo Menu::widget([
    'items' => [
        ['label' => 'Главная', 'url' => ['site/index']],
        ['label' => 'О компании', 'url' => ['site/about']],
        ['label' => 'Услуги', 'url' => ['site/services']],
        ['label' => 'Контакты', 'url' => ['site/contacts']],
    ],
	'options' => [
					'id'=>'navid',
					'class' => 'navbar-nav',
					'style'=>'float: left; font-size: 16px;',
					'data'=>'menu',
				],
    'labelTemplate' =>'{label} Label',
    'linkTemplate' => '<a href="{url}"><span>{label}</span></a>',
    'activeCssClass'=>'active',
    'firstItemCssClass'=>'fist',
    'lastItemCssClass' =>'last',
]);

На выходе получаем

    <ul id="navid" class="navbar-nav" style="float: left; font-size: 16px;" data="menu">
        <li class="first">
    		<a href="http://demo/web/site/index"><span>Главная</span></a>
    	</li>
    	<li class="active">
    		<a href="http://demo/web/site/about"><span>О компании</span></a>
    	</li>
    	<li>
    		<a href="http://demo/web/site/services"><span>Услуги</span></a>
    	</li>
    	<li class="last">
    		<a href="http://demo/web/site/contacts"><span>Контакты</span></a>
    	</li >	
    </ul>

Возможно непосредственно добавлять теги со стилями в раздел item, для этого переводим свойство 'encodeLabels' в 'false'

echo Menu::widget([
    'items' => [
        ['label' => 'Главная', 'url' => ['site/index']],
        ['label' => 'О компании', 'url' => ['site/about']],
        ['label' => 'Услуги', 'url' => ['site/services']],
        ['label' => 'Контакты', 'url' => ['site/contacts']],
    ],
	'options' => [
					'id'=>'navid',
					'class' => 'navbar-nav',
					'style'=>'float: left; font-size: 16px;',
					'data'=>'menu',
				],
    'encodeLabels' =>'false',
    'activeCssClass'=>'active',
    'firstItemCssClass'=>'fist',
    'lastItemCssClass' =>'last',
]);

Получаем следующий html код:

    <ul id="navid" class="navbar-nav" style="float: left; font-size: 16px;" data="menu" >
        <li class="first">
    		<a href="http://demo/web/site/index"><span class="one" >Главная</span></a>
    	</li>
    	<li class="active">
    		<a href="http://demo/web/site/about"><span class="two" >О компании</span></a>
    	</li>
    	<li>
    		<a href="http://demo/web/site/services"><span  class="tree" >>Услуги</span></a>
    	</li>
    	<li class="last">
    		<a href="http://demo/web/site/contacts"><span  class="four" >Контакты</span></a>
    	</li>	
    </ul>

Вложенное меню

Усложним программный код и добавим к элементу услуги вложенность.

echo Menu::widget([
    'items' => [
        ['label' => 'Главная', 'url' => ['site/index']],
		['label' => 'О компании', 'url' => ['site/about']],
        ['label' => 'Услуги',
			'url' => ['services/index'],
			'options'=>['class'=>'dropdown'],
			'template' => '<a href="{url}" class="url-class">{label}</a>',
			'items' => [
				['label' => 'Юридические услуги', 'url' => ['services/juridical-services']],
				['label' => 'Оценочные услуги', 'url' => ['services/valuation-services']],
			]
		],
        ['label' => 'Контакты', 'url' => ['site/contacts']]
        
    ],
	'submenuTemplate' => "\n<ul class='dropdown-menu' role='menu'>\n{items}\n</ul>\n",
]);

Исходный html код:

<ul>
    <li><a href="/web/index">Главная</a></li>
    <li><a href="/web/about">О компании</a></li>
    <li class="dropdown"><a href="/web/services/index" class="url-class">Услуги</a>
		<ul class='dropdown-menu' role='menu'>
			<li><a href="/web/services/juridical-services">Юридические услуги</a></li>
			<li><a href="/web/services/valuation-services">Оценочные услуги</a></li>
		</ul>
	</li>
	<li><a href="/web/site/contacts">Контакты</a></li>
</ul>

Добавим дополнительный класс к каждому пункту меню:

echo Menu::widget([
    'items' => [
        ['label' => 'Главная', 'url' => ['site/index']],
		['label' => 'О компании', 'url' => ['site/about']],
        ['label' => 'Услуги',
			'url' => ['services/index'],
			'options'=>['class'=>'dropdown'],
			'template' => '<a href="{url}" class="url-class">{label}</a>',
			'items' => [
				['label' => 'Юридические услуги', 'url' => ['services/juridical-services']],
				['label' => 'Оценочные услуги', 'url' => ['services/valuation-services']],
			]
		],
        ['label' => 'Контакты', 'url' => ['site/contacts']]
        
    ],
	'itemOptions'=>['class'=>'myclass', 'style'=>'font-size = 12px;'],
	'submenuTemplate' => "\n<ul class='dropdown-menu' role='menu'>\n{items}\n</ul>\n",
]);

Получаем следующий html код:

<ul>
    <li class = 'myclass' style = 'font-size = 12px;' ><a href="/web/index">Главная</a></li>
    <li class = 'myclass' style = 'font-size = 12px;'><a href="/web/about">О компании</a></li>
    <li class="dropdown"><a href="/web/services/index" class="url-class">Услуги</a>
		<ul class='dropdown-menu myclass' style = 'font-size = 12px;' role='menu'>
			<li class = 'myclass' style = 'font-size = 12px;'><a href="/web/services/juridical-services">Юридические услуги</a></li>
			<li class = 'myclass' style = 'font-size = 12px;'><a href="/web/services/valuation-services">Оценочные услуги</a></li>
		</ul>
	</li
	<li class = 'myclass' style = 'font-size = 12px;'><a href="/web/site/contacts">Контакты</a></li>
</ul>

Итак мы рассмотрели основные примеры использования виджета Menu в Yii 2.x, надеюсь они будут для вас полезными.

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

  1. Дмитрий Демьянов 21 февраля 2017, 11:33 # 0
    'activeCssClass' => 'active'
    Нет, не работает и работать не будет. В массиве наших элементов (пунктов меню) активному элементу (активной ссылке) нужно присвоить
    'active' => true
    .
    1. Evgeniy 4club 11 мая 2017, 11:24 # 0
      ничто не мешает тебе добавить дополнительные параметры:

      	[
      		'label' => 'Тест',
      		'url' => ['/test/default/index'],
      		'active' => $this->context->module->id == 'test', // или \Yii::$app->controller->id == 'test' или другие варианты
      		'visible' => Yii::$app->user->can('admin'),
      	],               
      

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

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