Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Yii2 Nav Bar add images in menu items

Is it possible to add images in Yii2 Bootstrap Nav Bar menu items? In official doc I haven't found any option.

I want to show images instead of Label text!

Nav Bar code is.

<?php
    NavBar::begin([
        'brandLabel' => 'My Company',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top',
        ],
    ]);

   $menuItems = [];

   $menuItems[] = [
            'label' => Yii::t('app','Language'),
            'items' => [
                [
                  'label' => 'English', 
                  'url' => ['site/language','set'=>'en'],
                ],

                '<li class="divider"></li>',

                [
                  'label' => 'Danmark',
                  'url' => ['site/language','set'=>'da'],
                ],

              ],
      ];
like image 764
Muhammad Shahzad Avatar asked Jul 22 '16 18:07

Muhammad Shahzad


3 Answers

if an icon you can use icon

   $menuItems[] = [
        'label' => Yii::t('app','Language'),
        'items' => [
            [
              'label' => 'English', 
              'url' => ['site/language','set'=>'en'],
              'icon'=> 'cog',
            ],

if an img and the html code in label

  $menuItems[] = [
        'label' => Yii::t('app','Language'),
        'items' => [
            [
              'label' => '<img src="smiley.gif" ><span>sample</span>', 
              'url' => ['site/language','set'=>'en'],
            ],

I use

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

and you should set the 'encodeLabels' => false,

        echo Nav::widget([
            'options' => ['class' => 'navbar-nav navbar-right'],
            'items' => $menuItems,
            'encodeLabels' => false,
        ]);
like image 179
ScaisEdge Avatar answered Oct 17 '22 07:10

ScaisEdge


Add 'encodeLabels' => false, as a attribute for Nav::widget. Or else it will not convert the code to HTML and it will consider it as string and it will display as it is given inside the label.

echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-left'],
    'encodeLabels' => false,
    'items' => [
        [
            'label' => '<span class="glyphicon glyphicon-home"></span>', 
            'url' => ['/site/dashboard'],
        ],
    ] // Close of items
    ]); // Close of Nav::Widget.
like image 37
Pravinraj Venkatachalam Avatar answered Oct 17 '22 05:10

Pravinraj Venkatachalam


Add an image tag to the 'brandLabel' setting:

NavBar::begin([
    'brandLabel' => '<img id="logo" src="/img/logo.svg" alt="logo">',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar',
    ],
]);
like image 3
James Avatar answered Oct 17 '22 07:10

James