CODEWITHSUNDEEP
twitter-bootstrap-3yii2
Harlan Gray
Harlan Gray

Reputation: 341

Multilevel Boostrap Menu in Yii 2

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?

Upvotes: 6

Views: 6312

Answers (3)

JOSE LUIS MACIAS
JOSE LUIS MACIAS

Reputation: 11

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 !!

Upvotes: 1

verybadbug
verybadbug

Reputation: 929

Try to use this extension of Nav widget.

Upvotes: 0

arogachev
arogachev

Reputation: 33548

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.

Upvotes: 5

Related Questions