CMenu Styling In Yii

CMenu widgets is used to display the menu items. It is default widget of yii. If you like to change the menu items style, This post will help you to change style.

Set Active Class

Set the active class name of CMenu list. Using “activeCssClass” property, we can set it or override the active css class.

<?php $this->widget('zii.widgets.CMenu',array(
    //Set Active class
    'activeCssClass'=>'activeclass'
        'items'=>array(                
            array('label'=>'Home', 'url'=>array('/site/index')),
            array('label'=>'About', 'url'=>array('/site/about')),
            array('label'=>'Contact', 'url'=>array('/site/contact'))
        ),            
    )); ?>

HTML OUTPUT

<ul id="yw0">
    <li class="active">
        <a href="cssmenu/index.php?r=site/index">Home</a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/page">About</a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/contact">Contact</a>
    </li>
</ul>

linkLabelWrapper Tag”

Add tag for link label in CMenu. Here we added tag inside the tags like. Link

<?php $this->widget('zii.widgets.CMenu',array(            
    'linkLabelWrapper' => 'span',
        'items'=>array(                
            array('label'=>'Home', 'url'=>array('/site/index')),
            array('label'=>'About', 'url'=>array('/site/about')),
            array('label'=>'Contact', 'url'=>array('/site/contact'))
			),            
		)); ?>

HTML OUTPUT

<ul id="yw0">
    <li class="active">
        <a href="cssmenu/index.php?r=site/index"><span>Home</span></a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/page"><span>About</span></a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/contact"><span>Contact</span></a>
    </li>
</ul>

Add ID To CMenu

Add the ID for CMenu “UL” tag.

<?php $this->widget('zii.widgets.CMenu',array(
    'id'=>'menu',
        'items'=>array(                
            array('label'=>'Home', 'url'=>array('/site/index')),
			array('label'=>'About', 'url'=>array('/site/about')),
			array('label'=>'Contact', 'url'=>array('/site/contact'))
        ),            
    )); ?>

HTML OUTPUT

<ul id="menu-id">
    <li class="active">
        <a href="cssmenu/index.php?r=site/index">Home</a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/page">About</a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/contact">Contact</a>
    </li>
</ul>

Add Class To CMenu

Add the Class for CMenu “UL” tag.

<?php $this->widget('zii.widgets.CMenu',array(
    'id'=>'menu',
        'items'=>array(                
            array('label'=>'Home', 'url'=>array('/site/index')),
			array('label'=>'About', 'url'=>array('/site/about')),
			array('label'=>'Contact', 'url'=>array('/site/contact'))
            ),   
        'htmlOptions' => array( 'class' => 'menu-nav' )         
    )); ?>

HTML OUTPUT

<ul class="menu-nav" id="menu-id">
    <li class="active">
        <a href="cssmenu/index.php?r=site/index">Home</a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/page">About</a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/contact">Contact</a>
    </li>
</ul>

Add Class, Id To Submenu UL

Add the ID, Class for (CMenu) Submenu “UL” tag.

<?php $this->widget('zii.widgets.CMenu',array(
    'id'=>'menu-id',
        'items'=>array(                
            array('label'=>'Home', 'url'=>array('/site/index')),
            array('label'=>'About', 'url'=>array('/site/about')),
			array('label'=>'Contact', 'url'=>array('/site/contact')),
            array(
                'label'=>'Parent Menu',
                'url'=>array('site/menu'),
                // Class, Id For CMenu
                'submenuOptions' => array( 'class' => 'dropdown-menu', 'id'=>'submenu-dd' ),
                'items'=>array(
                    array('label'=>'Sub Menu 1','url'=>array('/site/menu1')),
                    array('label'=>'Sub Menu 2','url'=>array('/site/menu2')),
                    array('label'=>'Sub Menu 3','url'=>array('/site/menu3'))   
                ),
            )
        ),
        'htmlOptions' => array( 'class' => 'menu-nav' )            
    )); ?>

HTML OUTPUT

<ul class="menu-nav" id="menu-id">
<li class="active"><a href="cssmenu/index.php?r=site/index">Home</a></li>
<li><a href="cssmenu/index.php?r=site/page">About</a></li>
<li><a href="cssmenu/index.php?r=site/contact">Contact</a></li>
<li><a href="cssmenu/index.php?r=site/menu">Parent Menu</a>
    <ul class="dropdown-menu" id="submenu-dd">
    <li><a href="cssmenu/index.php?r=site/menu1">Sub Menu 1</a></li>
    <li><a href="cssmenu/index.php?r=site/menu2">Sub Menu 2</a></li>
    <li><a href="cssmenu/index.php?r=site/menu3">Sub Menu 3</a></li>
    </ul>
</li>
</ul>

Add ID, Class to link of lable.

<?php $this->widget('zii.widgets.CMenu',array(
    'items'=>array(                
	   array('label'=>'Home', 'url'=>array('/site/index')),
	   array('label'=>'About', 'url'=>array('/site/about')),
	   array(
            'label'=>'Contact',
            'url'=>array('/site/contact'),
            'linkOptions'=>array(
                                    'id'=>'likoptions-id',
                                    'class'=>'linkoptions'
                                    )                    
            ),
        )            
    )); ?>    

HTML OUTPUT

<ul id="yw0">
    <li class="active">
        <a href="cssmenu/index.php?r=site/index">Home</a>
    </li>
    <li>
        <a href="cssmenu/index.php?r=site/page">About</a>
    </li>
    <li>
        <a id="likoptions-id" class="linkoptions" href="cssmenu/index.php?r=site/contact">Contact</a>
    </li>
</ul>

Add Class, Id To CMenu CMenu Item

Add ID, Class to menu items “li”.

<?php $this->widget('zii.widgets.CMenu',array(
    'items'=>array(                
        array('label'=>'Home', 'url'=>array('/site/index')),
        array('label'=>'About', 'url'=>array('/site/about')),
        array(
            'label'=>'Contact',
            'url'=>array('/site/contact'),
            'itemOptions'=>array('id'=>'itemsoptions','class'=>'itemoptions'),                    
        ),
        )            
    )); ?>

HTML OUTPUT

<ul id="yw0">
    <li class="active"><a href="cssmenu/index.php?r=site/index">Home</a></li>
    <li><a href="cssmenu/index.php?r=site/page">About</a></li>
    <li id="itemsoptions" class="itemoptions">
        <a href="cssmenu/index.php?r=site/contact">Contact</a>
    </li>
</ul>

Activate Parents Class Of CMenu Submenu

When we select submenu, we have to decide to select parent items. ‘activeParents’ attribute used to enable or disable this future.

<?php $this->widget('zii.widgets.CMenu',array(
    'activateParents'=>true,
    'items'=>array(                
        array('label'=>'Home', 'url'=>array('/site/index')),
		array('label'=>'About', 'url'=>array('/site/about')),
        array(
            'label'=>'Contact Menu',
            'items'=>array(
            array('label'=>'Contact', 'url'=>array('/site/contact')),
        ),
      ),
	)            
)); ?>

HTML OUTPUT

<ul id="yw1">
    <li><a href="cssmenu/index.php?r=site/index">Home</a></li>
    <li><a href="cssmenu/index.php?r=site/page">About</a></li>
    <li class="active"><span>Contact Menu</span>
    <ul>
        <li class="active">
            <a href="cssmenu/index.php?r=site/contact">Contact</a>
        </li>
    </ul>
    </li>
</ul>

Add HTML In CMenu Widget

How to add custom html code in cmenu widget of yii framework?. Just Make the ‘encodeLabel’ property to false then add the html code in menu label

<?php $this->widget('zii.widgets.CMenu',array(
    'encodeLabel'=>false,
    'items'=>array(                
        array('label'=>'Home ',, 'url'=>array('/site/index')),
		array('label'=>'About', 'url'=>array('/site/about')),
        array(
            'label'=>'Contact Menu',
            'items'=>array(
            array('label'=>'Contact', 'url'=>array('/site/contact')),
        ),
      ),
	)            
)); ?>

HTML OUTPUT

<ul id="yw1">
    <li><a href="cssmenu/index.php?r=site/index">Home  <b class="home-icon"></b></a></li>
    <li><a href="cssmenu/index.php?r=site/page">About</a></li>
    <li class="active"><span>Contact Menu</span>
    <ul>
        <li class="active">
            <a href="cssmenu/index.php?r=site/contact">Contact</a>
        </li>
    </ul>
    </li>
</ul>