Yii Framework 2.0

Yii Framework 2 : Menu Widget

Posted on by dathoang

Yiiframewokr 2.0 ‘yii\widgets\Menu’ widgets is used to display the multi-level menu items using nested HTML lists. ‘items’ is the main property of Menu. It contains all the menu items with attributes. A menu can contain the sub-menu and their properties like class, style etc. So default Yii 2.0 menu widget is giving a flexible way to render a menu and it has the following methods.

  1. Menu Item Active Class
  2. First & Last Menu Item Class
  3. Menu Item Label Template
  4. Menu ID, Class, Style Etc.
  5. Sub menu Template
  6. Menu Links Options.
  7. Menu Item Options
  8. Activate Parents Menu Items
  9. Add HTML In Menu Items

We can set the active class name of Menu list. The default active class in yii2 is ‘active’. Using “activeCssClass” property, we can set it or override the default.


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
    ],
    'activeCssClass'=>'activeclass',
]);
?>
HTML OUTPUT

<ul>
    <li>
        <a href="/yii2site/web/index.php?r=site/index">Home</a>
    </li>
    <li class="activeclass">
        <a href="/yii2site/web/index.php?r=site/about">About</a>
    </li>
</ul>

First & Last Menu Item Class

firstItemCssClass is used to set the class for first item of menu or each sub-menu and by default it is null.
lastItemCssClass is used to set the class for last item of menu or each sub-menu and by default it is null.
When first or last menu item is acitve, ‘activeCssClass’ value will be added with this.


<?php
echo Menu::widget([
    'items' => [
    // not just as 'controller' even if default action is used.
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
        ['label' => 'Contact', 'url' => ['site/contact']],
    ],
    'firstItemCssClass'=>'fistitemclass',
    'lastItemCssClass' =>'lastitemclass',
]);
?>
HTML OUTPUT

<ul>
    <li class="fistitemclass">
        <a href="/yii2site/web/index.php?r=site%2Findex">Home</a>
    </li>
    <li class="active">
        <a href="/yii2site/web/index.php?r=site%2Fabout">About</a>
    </li>
    <li class="lastitemclass">
        <a href="/yii2site/web/index.php?r=site%2Fcontact">Contact</a>
    </li>
</ul>

Add tag for link item label in Menu widget yii2. For example We added the
tag around the link label like. Link.
Note: ‘labelTemplate’ format will work If menu item url is empty


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
    ],
    'labelTemplate' =>'{label} Label',
    'linkTemplate' => '<a href="{url}"><span>{label}</span></a>',
]);
?>
HTML OUTPUT

<ul>
    <li>
        <a href="/yii2site/web/index.php?r=site%2Findex"><span>Home</span></a>
    </li>
    <li>
        <a href="/yii2site/web/index.php?r=site%2Fabout"><span>About</span></a>
    </li>
</ul>

Menu widget ‘options’ array is use to render the HTML attributes for the menu’s container tag like class, id, style and more tags in yii2. By default it is empty array;


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
        ['label' => 'Contact', 'url' => ['site/contact']],
    ],
    'options' => [
        'class' => 'navbar-nav nav',
        'id'=>'navbar-id',
        'style'=>'font-size: 14px;',
        'data-tag'=>'yii2-menu',
    ],
]);
?>
HTML OUTPUT

<ul data-tag="yii2-menu" style="display:block; font-size: 14px;" class="navbar-nav nav" id="navbar-id">
    <li>
        <a href="/yii2site/web/index.php?r=site%2Findex">Home</a>
    </li>
    <li class="active">
        <a href="/yii2site/web/index.php?r=site%2Fabout">About</a>
    </li>
    <li>
        <a href="/yii2site/web/index.php?r=site%2Fcontact">Contact</a>
    </li>
</ul>

‘submenuTemplate’ and ‘template’ is a wonderful option in menu widget of yiiframework 2.0.

‘submenuTemplate’ string is used to replace the default submenu ‘{items}’ format by given format string. By default ‘submenu’ tag is ‘ul’. If you want you can change it or add class, id, style etc.
Default ‘submenuTemplate’ is

public $submenuTemplate = "\n<ul>\n{items}\n</ul>\n";

‘template’ options is used to customize the items value. By default items having a tag. We can change it using this.


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
        [
            'label' => 'Products',
            'url' => ['product/index'],
            'options'=>['class'=>'dropdown'],
            'template' => '<a href="{url}" class="href_class">{label}</a>',
            'items' => [
                ['label' => 'New Arrivals', 'url' => ['product/new']],
                ['label' => 'Most Popular', 'url' => ['product/popular']],
            ]
        ],
    ],
    'submenuTemplate' => "\n<ul class='dropdown-menu' role='menu'>\n{items}\n</ul>\n",
]);
?>
HTML OUTPUT

<ul>
    <li>
        <a href="/yii2site/web/index.php?r=site%2Findex">Home</a>
    </li>
    <li class="active">
        <a href="/yii2site/web/index.php?r=site%2Fabout">About</a>
    </li>
    <li class="dropdown">
        <a class="href_class" href="/yii2site/web/index.php?r=product%2Findex">Products</a>
        <ul role="menu" class="dropdown-menu">
            <li>
                <a href="/yii2site/web/index.php?r=product%2Fnew">New Arrivals</a>
            </li>
            <li>
                <a href="/yii2site/web/index.php?r=product%2Fpopular">Most Popular</a>
            </li>
        </ul>
    </li>
</ul>

‘linkTemplate’ string is used to customize all the link of menu items. The default value is

public $linkTemplate = '<a href="{url}">{label}</a>';

Just change the format How do you want?.{url} value will be replaced the corresponding item URL and {label} will be replace link text. You can add class, id, style and more data attribute of item menu links.


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
    ],
    'linkTemplate' => '<a href="{url}" class="href_class" id="href_id" style="">{label}</a>',
]);
?>
HTML OUTPUT

<ul>
    <li>
        <a style="" id="href_id" class="href_class" href="/yii2site/web/index.php?r=site/index">Home</a>
    </li>
    <li class="active">
        <a style="" id="href_id" class="href_class" href="/yii2site/web/index.php?r=site/about">About</a>
    </li>
</ul>

‘itemOptions’ property is used to set the HTML attribute to all the menu items of menu, sub menu. It will merge the html attribute if anything assigned before.


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
        [
            'label' => 'Products',
            'url' => ['product/index'],
            'items' => [
                ['label' => 'New Arrivals', 'url' => ['product/index']],
            ],
        ],
    ],
    'itemOptions'=>array('id'=>'item_id', 'class'=>'item_class', 'style'=>''),
]);
?>
HTML OUTPUT

<ul>
    <li style="" class="item_class" id="item_id">
        <a href="/yii2site/web/index.php?r=site%2Findex">Home</a>
    </li>
    <li style="" class="item_class active" id="item_id">
        <a href="/yii2site/web/index.php?r=site%2Fabout">About</a>
    </li>
    <li style="" class="item_class" id="item_id">
        <a href="/yii2site/web/index.php?r=product%2Findex">Products</a>
        <ul>
            <li style="" class="item_class" id="item_id">
                <a href="/yii2site/web/index.php?r=product%2Findex">New Arrivals</a>
            </li>
        </ul>
    </li>
</ul>

Activate Parents Menu Items

Whether to activate parent menu items When one of the corresponding child menu items is active. The active class will append the existing class value if available for parent.


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
        [
            'label' => 'Contact',
            'url' => ['site/contact'],
            'items' => [
                ['label' => 'Contact Us', 'url' => ['site/contact']],
            ]
        ],
    ],
    'activateParents'=>true,
]);
?>
HTML OUTPUT

<ul>
    <li>
        <a href="/yii2site/web/index.php?r=site%2Findex">Home</a>
    </li>
    <li>
        <a href="/yii2site/web/index.php?r=site%2Fabout">About</a>
    </li>
    <li class="active">
        <a href="/yii2site/web/index.php?r=site%2Fcontact">Contact</a>
        <ul>
            <li class="active">
                <a href="/yii2site/web/index.php?r=site%2Fcontact">Contact Us</a>
            </li>
        </ul>
    </li>
</ul>

Add HTML In Menu Items

By default ‘encodeLabels’ is true. So your item label will be encode using Html::encode($label). If you don’t want to encode the html just set the false to ‘encodeLabels’ attribute in yii 2.0 menu widgets.


<?php
echo Menu::widget([
    'items' => [
        ['label' => 'Home<span class="caret"></span>', 'url' => ['site/index']],
        ['label' => 'About', 'url' => ['site/about']],
    ],
    'encodeLabels' => false,
    'options' => array( 'class' => 'navbar-nav nav', 'id'=>'navbar-id' )
]);
?>
HTML OUTPUT

<ul class="navbar-nav nav" id="navbar-id">
    <li>
        <a href="/yii2site/web/index.php?r=site%2Findex">Home<span class="caret"></span></a>
    </li>
    <li>
        <a href="/yii2site/web/index.php?r=site%2Fabout">About</a>
    </li>
</ul>

 

dathoang

Leave a Reply

Your email address will not be published. Required fields are marked *