Menu
I want my menu to have more than 2 levels. Looks like Yii 2 only renders up to 2 levels. For example this:
NavBar::begin();
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
[
'label' => 'Level 1',
'items' => [
['label' => 'Level 2 - 1', 'url' => '#'],
['label' => 'Level 2 - 2', 'url' => '#'],
[
'label' => 'Level 2 - 3',
'items' => [
['label' => 'Level 3 - 1', 'url' => '#'],
['label' => 'Level 3 - 2', 'url' => '#'],
],
],
]
],
],
]);
NavBar::end();
will not display the Level 3 - x menu items. How do I add more levels to the menu?
547
It is also called treeview menu. 1-st level dropdowns are opens by click, but inner submenus opens by mouse hover. On mobile screens all menu items and their submenus work like accordion Steps to create multilevel navbar dropdown menu with Bootstrap 5 Add your submenu ul li elements inside parent li
Used for Yii2 framework. The widget uses data from the database, in which there are, in addition to the primary keys, also the parent keys. Data from the database is taken from an active model, which instance of yii\db\ActiveRecord.
You may use nested sets. Look at this extension for Yii: http://www.yiiframework.com/extension/nestedsetbehavior/ and its documentation. All you need to do is component with dynamic creation of menu items array for nested sets.
an object configuration array that will be passed to Yii::createObject () to create the behavior object. Attaches a list of behaviors to the component. Each behavior is indexed by its name and should be a yii\base\Behavior object, a string specifying the behavior class, or an configuration array for creating the behavior.
This is not Yii 2 limitation, it's Boostrap 3 limitation.
Here is quote from mdo (one of the main Boostrap 3 contributors):
We haven't seen anyone using submenus in meaningful ways and the code necessary to make them work well is just too much overhead. Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0.
It's taken from here.
However you can find some alternatives to use more levels. For example take a look this extension.
Also this question is discussed with more details and examples here.
79
1) Add Css in /web/css/site.css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
min-width: 200px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
2) Add submenu and attributes 'itemsOptions' , 'submenuOptions', 'items':
...
[
'label' => 'Level 2 - 3',
'itemsOptions'=>['class'=>'dropdown-submenu'],
'submenuOptions'=>['class'=>'dropdown-menu'],
'items' => [
['label' => 'Level 3 - 1', 'url' => '#'],
['label' => 'Level 3 - 2', 'url' => '#'],
],
],
....
3) ok !!
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
