Yii 1.1: Customizing the CMenu Widget

4 followers

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 . . .

Total 1 comment

#14559 report it
tommy2288 at 2013/08/22 01:54pm
Doesn't Drop Down, Already expanded

I cut and pasted your code into layouts/main.php

The submenu is there but it is already expanded. How can I make the submenu drop down when I hover over the top menu?

Also, can you make it drop vertically instead of horizontally?

thanks!

Leave a comment

Please to leave your comment.

Write new article
  • Written by: mistryb
  • Category: Tips
  • Yii Version: 1.1
  • Votes: +5 / -1
  • Viewed: 30,633 times
  • Created on: Jul 5, 2013
  • Last updated: Nov 10, 2014
  • Tags: CMenu, Widgets, customize