Q: Import Uikit in yii\bootstrap\NavBar - css

Question

I use Yii2 framework and I'm writing a navbar in layout/main.php. I have to use Uikit so I imported css and js files in my project, now the problem is that yii\bootstrap\NavBar seems not to be customizable and doesn't support uikit classes. Is there a way to use uk classes and span tag with yii navbar?
I have this HTML code:
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>
Parent
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active">Active</li>
<li><a href="#">Item
<span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
</a></li>
<li class="uk-nav-header">Header</li>
<li>Item</li>
<li>Item</li>
<li class="uk-nav-divider"></li>
<li>Item</li>
</ul>
</div>
</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
Parent
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active">Active</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li>Item</li>
<li>Item</li>
<li class="uk-nav-divider"></li>
<li>Item</li>
</ul>
</div>
</li>
</ul>
</div>
and this is the implementation with yii2 component:
NavBar::begin([
'brandLabel' => Html::img('/img/my_image.png'),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'uk-navbar navbar-fixed-top uk-align-center',
'style' => 'background-color: orange; color: black ; height: 100px;
margin-top: 0; margin-bottom: 0',
]
]);
$menuItems = [
['label' => 'Home', 'url' => Yii::$app->homeUrl],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right uk-link-reset',
'style' => 'color: white'
],
'items' => $menuItems,
]);
NavBar::end();

Answer 1

You need to include html options inside each individual item
$menuItems = [
['label' => 'Home', 'url' => Yii::$app->homeUrl],
[
'label' => 'Item <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>',
'encode' => false,
'url' => ['/item'],
'options' => ['class' => 'uk-active'],
],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']]
];
More details from the item documentation:
label: string, required, the nav item label.
url: optional, the item's URL. Defaults to "#".
visible: boolean, optional, whether this menu item is visible. Defaults to true.
linkOptions: array, optional, the HTML attributes of the item's link.
options: array, optional, the HTML attributes of the item container (LI).
active: boolean, optional, whether the item should be on active state or not.
dropDownOptions: array, optional, the HTML options that will passed to the yii\bootstrap\Dropdown widget.
items: array|string, optional, the configuration array for creating a yii\bootstrap\Dropdown widget, or a string representing the dropdown menu. Note that Bootstrap does not support sub-dropdown menus.
encode: boolean, optional, whether the label will be HTML-encoded. If set, supersedes the $encodeLabels option for only this item.