How to add raw HTML in Yii CMenu label - html

Question

I create a menu like a Twitter Bootstrap navbar with CMenu widget:
<?php
$this->widget( 'zii.widgets.CMenu', array(
'items' => array(
array(
'label' => 'Home',
'url' => array( '/site/index' ),
),
array(
'label' => 'Dropdown <b class="caret"></b>',
'url' => '#',
'submenuOptions' => array( 'class' => 'dropdown-menu' ),
'items' => array(
array(
'label' => 'Submenu Item 1',
'url' => array( '/user/create' ),
),
array(
'label' => 'Submenu Item 1',
'url' => array( '/user/list' ),
),
),
'itemOptions' => array( 'class' => 'dropdown' ),
'linkOptions' => array( 'class' => 'dropdown-toggle', 'data-toggle' => 'dropdown' ),
),
'htmlOptions' => array( 'class' => 'nav' ),
)); ?>
This code generate menu with 2 items in it and 1 submenu for second menu item. Fine. But only thing, which not worked is 'label' => 'Dropdown <b class="caret"></b>', in 9th line. It rendered as Dropdown <b class="caret"></b> on page. So I see caption 'Dropdown <b class="caret"></b>' instead of Dropdown ▼.
How I can change code to show unescaped HTML in menu label?
Thanks for your attention.

Answer 1

You have to set encodeLabel attribute of CMenu to false
<?php
$this->widget('zii.widgets.CMenu', array(
'encodeLabel' => false,
'htmlOptions' => array('class' => 'nav'),
'items' => array(
array(
'label' => 'Home',
'url' => array('/site/index'),
),
array(
'label' => 'Dropdown <b class="caret"></b>',
'url' => '#',
'submenuOptions' => array('class' => 'dropdown-menu'),
'items' => array(
array(
'label' => 'Submenu Item 1',
'url' => array('/user/create'),
),
array(
'label' => 'Submenu Item 1',
'url' => array('/user/list'),
),
),
'itemOptions' => array('class' => 'dropdown'),
'linkOptions' => array('class' => 'dropdown-toggle', 'data-toggle' => 'dropdown'),
),
),
));
?>

Answer 2

My solution is creating CMenu extension:
layout/main.php
'submenuOptions'=>array('class'=>'dropdown-menu'),
'itemOptions'=>array('class'=>'dropdown'),
'linkOptions'=>array('class'=>'dropdown-toggle', 'data-toggle'=>'dropdown'),
// Dropdown arrow toggle
'dropdownArrow'=>true,
ext/widgets/BootstrapCMenu.php
class BootstrapCMenu extends CMenu {
protected function renderMenuItem($item)
{
if(isset($item['url']))
{
$item['label'] .= ($item['dropdownArrow']) ? ' <b class="caret"></b>' : '';
$label=$this->linkLabelWrapper===null ? $item['label'] : CHtml::tag($this->linkLabelWrapper, $this->linkLabelWrapperHtmlOptions, $item['label']);
return CHtml::link($label,$item['url'],isset($item['linkOptions']) ? $item['linkOptions'] : array());
}
else
return CHtml::tag('span',isset($item['linkOptions']) ? $item['linkOptions'] : array(), $item['label']);
}
}

Answer 3

In Yii 2.0, for adding glyphicon in navbar menu you can follow the below info.
Edit in vendor\yiisoft\yii2-bootstrap\Nav.php under renderItem function the following code:
if(isset($item['icons']))
$label=Html::tag('span', '', ['class' => 'glyphicon glyphicon-'.$item['icons']]).$label;
Now, you can directly use any icon from your code with icons option as
<?php
$this->widget( 'zii.widgets.CMenu', array(
'items' => array(
array(
'label' => 'Home',
'url' => array( '/site/index' ),
'icons'=> 'home',
),
array(
'label' => 'Dropdown <b class="caret"></b>',
'url' => '#',
'submenuOptions' => array( 'class' => 'dropdown-menu' ),
'items' => array(
array(
'label' => 'Submenu Item 1',
'url' => array( '/user/create' ),
),
array(
'label' => 'Submenu Item 1',
'url' => array( '/user/list' ),
),
),
'itemOptions' => array( 'class' => 'dropdown' ),
'linkOptions' => array( 'class' => 'dropdown-toggle', 'data-toggle' => 'dropdown' ),
),
'htmlOptions' => array( 'class' => 'nav' ),
)); ?>
You can make the corresponding changes even in older versions of yii.