1. HTML friendly labels.
2. Styling your Sub-menus.
3. Link Options.
4. Putting it All Together.

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:

<?php $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 . . .