Custom yii\widgets\Menu

Hi all,

i have a question about yii\widgets\Menu.

My template:


<ul class="page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">

                        <li class="nav-item [b]start active open[/b]">

                            <a href="javascript:;" class="nav-link nav-toggle">

                                <i class="icon-home"></i>

                                <span class="title">Dashboard</span>

                                <span class="selected"></span>

                                <span class="arrow open"></span>

                            </a>

                            <ul class="[b]sub-menu[/b]">

                                <li class="nav-item [b]start active open[/b]">

                                    <a href="index.html" class="nav-link ">

                                        <i class="icon-bar-chart"></i>

                                        <span class="title">Dashboard 1</span>

                                        <span class="selected"></span>

                                    </a>

                                </li>

                                <li class="nav-item start ">

                                    <a href="dashboard_2.html" class="nav-link ">

                                        <i class="icon-bulb"></i>

                                        <span class="title">Dashboard 2</span>

                                        <span class="badge badge-success">1</span>

                                    </a>

                                </li>

                                <li class="nav-item start ">

                                    <a href="dashboard_3.html" class="nav-link ">

                                        <i class="icon-graph"></i>

                                        <span class="title">Dashboard 3</span>

                                        <span class="badge badge-danger">5</span>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item  ">

                            <a href="javascript:;" class="nav-link nav-toggle">

                                <i class="icon-bulb"></i>

                                <span class="title">Elements</span>

                                <span class="arrow"></span>

                            </a>

                            <ul class="sub-menu">

                                <li class="nav-item  ">

                                    <a href="elements_steps.html" class="nav-link ">

                                        <span class="title">Steps</span>

                                    </a>

                                </li>

                                <li class="nav-item  ">

                                    <a href="elements_lists.html" class="nav-link ">

                                        <span class="title">Lists</span>

                                    </a>

                                </li>

                                <li class="nav-item  ">

                                    <a href="elements_ribbons.html" class="nav-link ">

                                        <span class="title">Ribbons</span>

                                    </a>

                                </li>

                                <li class="nav-item  ">

                                    <a href="elements_overlay.html" class="nav-link ">

                                        <span class="title">Overlays</span>

                                    </a>

                                </li>

                                <li class="nav-item  ">

                                    <a href="elements_cards.html" class="nav-link ">

                                        <span class="title">User Cards</span>

                                    </a>

                                </li>

                            </ul>

                        </li>

                    </ul>

My yii\widgets\Menu:


echo Menu::widget([

                        'encodeLabels' => false,

                        'options' => ['class' => 'page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu', 'data-keep-expanded' => 'false', 'data-auto-scroll' => 'true', 'data-slide-speed' => '200'],

                        'items' => [

                            // Important: you need to specify url as 'controller/action',

                            // not just as 'controller' even if default action is used.

                            // 'Products' menu item will be selected as long as the route is 'product/index'

                            ['label' => ' <i class="icon-home"></i>

                                <span class="title">Dashboard</span>

                                <span class="arrow"></span>', 'url' => ['javascript:;'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link nav-toggle'], 'items' => [

                                ['label' => '<i class="icon-bar-chart"></i>

                                        <span class="title">Dashboard 1</span>', 'url' => ['product/index', 'tag' => 'new'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link'] ],

                            ]],

                        ]);

How i can add the class sub-menu for the dropdown <ul> with the yii\widgets\Menu?

And it’s possibile to add the Active class: start active open?

You can try following




echo Menu::widget([

                        'encodeLabels' => false,

                        'options' => ['class' => 'page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu', 'data-keep-expanded' => 'false', 'data-auto-scroll' => 'true', 'data-slide-speed' => '200'],

                        'submenuTemplate' => "\n<ul class='sub-menu'>\n{items}\n</ul>",

						'items' => [

                            // Important: you need to specify url as 'controller/action',

                            // not just as 'controller' even if default action is used.

                            // 'Products' menu item will be selected as long as the route is 'product/index'

                            ['label' => ' <i class="icon-home"></i>

                                <span class="title">Dashboard</span>

                                <span class="arrow"></span>', 'url' => ['javascript:;'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link nav-toggle'], 'items' => [

                                ['label' => '<i class="icon-bar-chart"></i>

                                        <span class="title">Dashboard 1</span>', 'url' => ['product/index', 'tag' => 'new'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link'] ],

                            ]],

                        ]);

Please see the code added after options:


 'submenuTemplate' => "\n<ul class='sub-menu'>\n{items}\n</ul>",

And also using active class:




echo Menu::widget([

                        'encodeLabels' => false,

                        'options' => ['class' => 'page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu', 'data-keep-expanded' => 'false', 'data-auto-scroll' => 'true', 'data-slide-speed' => '200'],

                        

						'activeCssClass'=>'start active open',

						'submenuTemplate' => "\n<ul class='sub-menu'>\n{items}\n</ul>",

						

                                                'items' => [

                            // Important: you need to specify url as 'controller/action',

                            // not just as 'controller' even if default action is used.

                            // 'Products' menu item will be selected as long as the route is 'product/index'

                            ['label' => ' <i class="icon-home"></i>

                                <span class="title">Dashboard</span>

                                <span class="arrow"></span>', 'url' => ['javascript:;'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link nav-toggle'], 'items' => [

                                ['label' => '<i class="icon-bar-chart"></i>

                                        <span class="title">Dashboard 1</span>', 'url' => ['product/index', 'tag' => 'new'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link'] ],

                            ]],

                        ]);