1

So I have a widget of listView that displays list of text

echo Menu::widget([
                   'options' => ['class'=>'nav navbar-nav side-nav'], 
                   'items'   => [
                       ['label' =>'Dashboard', ],
                       ['label' => 'Products'],
                   ]
                ]);

When I open browser , the result is :

<ul class="nav navbar-nav side-nav">
   <li>Dashboard</li>
   <li>Products</li>
</ul>

How do I add html element inside the <li> like below :

<ul class="nav navbar-nav side-nav">
     <li><i class='fap fap-dashboard'>Dashboard</i></li>
     <li><b class='fap fap-product'>Products</b></li>
 </ul>

by using widget ?

I have tried putting another item element beside label, but it instead created another <ul> element, and I also tried using 'options' beside label, and it instead change the li attribute (not creating inside it)

Karate_Dog
  • 1,265
  • 5
  • 20
  • 37

2 Answers2

5

For reach you goal you need set encodeLabels property to false (see). Code like this(it is work code):

 Menu::widget([
                'options' => ['class'=>'nav navbar-nav side-nav', 'format' => 'raw'],
                'encodeLabels' => false,
                'items'   => [
                    ['label' => Html::tag('i', 'Dashboard',['class' => 'fap fap-dashboard'])],
                    ['label' => Html::tag('b', 'Products',['class' => 'fap fap-product'])],
                ]
            ]);
vitalik_74
  • 4,573
  • 2
  • 19
  • 27
1

this might work-

echo Menu::widget([
           'options' => ['class'=>'nav navbar-nav side-nav'], 
           'items'   => [
               ['label' =>'<i class="fap fap-dashboard">Dashboard</i>',"encode"=>false, ],
               ['label' =>'<b class="fap fap-product">Products</b>',"encode"=>false],
           ]
        ]);
mohit
  • 1,878
  • 1
  • 16
  • 27