MainMenu Widget

I want to use the MainMenu widget but I would like to specify a class attribute on the menu items, and also one of the menu items needs to have an image next to it.

Is this possible to do?

Yes, the main menu has an id of "mainmenu" and generates an unordered list. So you can easily modify the stylesheet classes for the list. These are the standard you will find in the stylesheet:



	position: absolute;

	top: 59px;


#mainmenu ul


	padding: 0;

	margin: 0;

	padding: 0.4em 0 0.3em 0;


#mainmenu ul li


	display: inline;


#mainmenu ul li a


	padding: 0.4em 0.4em;

	color: white;

	text-decoration: none;

	font-weight: bold;


#mainmenu ul li a:hover, #mainmenu ul li


	background: #E6F2FF;

	color: #6399cd;


If you absolutely need separate classes for menu items, then you can modify /protected/components/views/mainMenu.php

Not sure exactly what you want in regard to the image, perhaps something like this?


		array('label'=>'<img src="images/icon.gif" hspace="10" border="0" />Home', 'url'=>array('/site/index')),

Is it possible to create a multi-level menu system using this widget? For example:


  <li><a href="#">Main Menu Item</a></li>


    <a href="#">Child Menu Link</a>


      <li><a href="#">Child Menu Item</a></li>




Can anyone advise?

Currently not possible, though a more extended Menu widget is being developed in Zii. See [topic=5591]this topic[/topic]

for multi level menu system, just add this into the Menu Widget:


$item2['url'] = $item[1];

$item2['htmlOptions'] = isset($item['htmlOptions']) ? $item['htmlOptions'] : array();

// add these two lines to add the Menu Widget with the multi-level menu capability

if (isset($item['children']))

    $item2['children'] = $this->parseItems($item['children']);

if ($active) {

    $item2['active'] = true;

    if (isset($item2['htmlOptions']['class']))

        $item2['htmlOptions']['class'] .= ' active';


        $item2['htmlOptions']['class'] = 'active';

} else $item2['active'] = false;


and for the setting:

$viewMainMenuItems=array(   array('Home', array('/')),

                            array('item', array('#'), 'children'=>


                                    array('sub', array('/')),

                                    array('item sub', array('#')),

                                    array('item sub', array('#')),

                                    array('item sub', array('#')),



                            array('item', array('#')),


and finally in the view, just check the value of $item[‘children’] using isset($item[‘children’]) in the for loop

<ul class="main_menu"><? foreach($items as $item): ?><li><?= CHtml::link($item['label'],$item['url'], $item['htmlOptions']); ?></li><? endforeach; ?></ul>

haven’t really tested this, but you should’ve got the idea :)