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.

  1. Set Active Class
  2. linkLabelWrapper Tag
  3. Add ID To CMenu
  4. Add Class To CMenu
  5. Add Class, Id To Submenu UL
  6. Add Class, Id To CMenu Links
  7. Add Class, Id To CMenu CMenu Item
  8. Activate Parents Class Of CMenu Submenu
  9. Add HTML In CMenu Widget

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'))
        ),            
    )); ?>
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'))
        ),            
    )); 
?>
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'))
        ),            
    )); 
?>
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' )         
    )); ?>
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' )
    )); 
?>
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'
            )                    
        ),
    )            
)); ?>
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'),                    
        ),
    )            
)); ?>
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')),
            ),
		),
    )
)); ?>
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')),
            ),
        ),
    )            
)); ?>
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>


Tags: Yii CMenu

  • Lokesh Tulsani

    How to change CMenu items from ” to ”

  • Bsource Code

    From my experience, we dont have the option to change ‘li’ to ‘div’ tag.Because look the Basic CMenu class functions
    https://github.com/yiisoft/yii/blob/1.1.14/framework/zii/widgets/CMenu.php

    It is working with ul tag only.

    Solution: Create one new widget like CMenu class with div tag.

    class MyMenu extends CMenu{
    protected function renderMenu($items){}
    protected function renderMenuRecursive($items){}
    }

  • Nick Bartlett

    Very helpful thank you!