Building Page Specific Menus using CMenu

You are viewing revision #2 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#3) »

  1. Setting up the CMenu Widget.
  2. Specifying Menu Items.

The Yii Framework provides a sweet functionality that allows you to easily create page specific menus. What does this mean? This allows you to create one layout or CSS styling for your menu, and when each page is loaded, a new set of menu items is loaded in. This is useful for context specific sidebars within your application.

Setting up the CMenu Widget.

First things first, you need to set up your CMenu widget. This will contain the logic that styles the menu to ensure that all your menus look the same. I've used some of the CMenu class's properties to customize my menu.

<?php $this->widget('zii.widgets.CMenu', array(
                'items' => $this->menu,
                'encodeLabel' => false,
                'htmlOptions' => array(
                    'class' => 'page-sidebar-menu hidden-phone hidden-tablet' //You can customize this for your application
                )
            ));?>

As you can see this is quite simple and concise. This code can be placed directly in your desired layout file, ensuring that every page that you render calls this script. The controller holds the menu items which will be set in your view file or controller. Personally, I prefer setting the menu items in the view file because it makes sense for it to be set there with the remainder of the UI related items (page title, breadcrumbs, etc).

Specifying Menu Items.

This code can be put in your controller or view file as mentioned above.

$this->menu=array(
	array(
            'label'=>'<span class="title"><strong>Project Actions</strong></span>',
            'url'=> '#'),
	array('label'=>'<i class="icon-plus"></i> Create A New Project', 'url'=>array('site/index')),
	array('label'=>'<i class="icon-archive"></i> View Archived Projects', 'url'=>'#'),
);

I like to put this right at the top of my view file along with the pageTitle and breadcrumbs set-up.

Let me know if I missed anything.

--bhavik . . .

0 0
3 followers
Viewed: 17 469 times
Version: Unknown (update)
Category: How-tos
Tags: CMenu
Written by: mistryb
Last updated by: mistryb
Created on: Jul 6, 2013
Last updated: 10 years ago
Update Article

Revisions

View all history

Related Articles