The CMenu class provides some useful features for generating menus in your web application.
HTML friendly labels.
You may want to add some HTML to your menu labels to display icons or images. You can do this by setting the encodeLabel property:
'encodeLabel' => false,
Styling your Sub-menus.
If your sub-menu is a drop down, then you may want to style it differently from the parent menu. You can do this using the submenuOptions property:
'submenuHtmlOptions' => array( 'class' => 'dropdown-menu', )
Link Options.
If you're creating a drop down menu and your top item doesn't need a link, you can customize the behavior using the linkOptions property:
'linkOptions'=> array( 'class' => 'dropdown-toggle', 'data-toggle' => 'dropdown', ),
Putting it All Together.
I always find it helpful to see all these snippets together in action. Here is a full implementation of CMenu widget:
$this->widget('zii.widgets.CMenu', array( 'items' => array( array( 'label' => '<i class="icon-user"></i><span class="username">Admin</span> <i class="icon-angle-down"></i>', 'url' => '#', 'linkOptions'=> array( 'class' => 'dropdown-toggle', 'data-toggle' => 'dropdown', ), 'itemOptions' => array('class'=>'dropdown user'), 'items' => array( array( 'label' => '<i class="icon-user"></i> My Profile', 'url' => '#' ), array( 'label' => '<i class="icon-calendar"></i> My Calendar', 'url' => '#', ), array( 'label' => '<i class="icon-tasks"></i> My Tasks</a>', 'url' => '#', ), array( 'label' => '', array( 'class' => 'divider', ) ), array( 'label' => '<i class="icon-key"></i> Log Out', 'url' => array('site/logout'), ), ) ), ), 'encodeLabel' => false, 'htmlOptions' => array( 'class'=>'nav pull-right', ), 'submenuHtmlOptions' => array( 'class' => 'dropdown-menu', ) ));
Let me know if I missed anything.
--bhavik . . .