Styling CMenu and CMenu items and links with CSS class in Yii

Many times we would want to style our CMenu by adding id or css classes to it. We can easily do this through htmlOptions, itemOptions, and linkOptions.

Adding id and class names to CMenu

We use the id and htmlOptions to accomplish this. Watch.

//in your view $this->widget('zii.widgets.CMenu', array( 'id'=>'myMenu', 'items'=>$this->myMenu, 'htmlOptions'=>array('class'=>'span-24 last'), ));

this will make Yii render

<ul class="span-24 last" id="myMenu"> ... </ul>

Adding class names to CMenu items and CMenu item links

We use itemOptions and linkOptions for this. Example.

//in your controller $this->myMenu = array( 'id'=>'myMenu', 'items'=>array( array( 'label'=>'Home', 'url'=>array('site/index'), 'itemOptions'=>array('class'=>'visited'), 'linkOptions'=>array('class'=>'bar'), ), array('label'=>'Sign Out', 'url'=>array('site/signout')), ), );

[ad]
This will let Yii render

...
<ul id="myMenu">
 <li class="visited">
  <a class="bar" href="/site/index">Home</a>
 </li>
...

http://code.dimilow.com/styling-cmenu-and-cmenu-items-and-links-with-css-class-in-yii/