Search code examples
menuyii2yii-widgets

How to add Multiple Yii2 submenuTemplate in one Menu::widget?

I am creating a web application based on yii2 and learn-plus dashboard theme, the collapsible sidebar navigation menu has been implemented with an id that acts as a targeted link (#menu_id) for the menu to open when parent link is clicked, Now I am trying to add Yii2 Menu::widget with Multiple submenuTemplate so that I can accommodate those ID's as each submenu should have its own id.

I have created the menu and it works perfectly with a single collapsible menu, the problem comes when I add more than one collapsible part of a menu.


<?php
use yii\widgets\Menu;
use yii\helpers\Html;


/**
 * Created by PhpStorm.
 * User: Mr Daud Mabena
 * Date: 01/05/19
 * Time: 01:34 PM
 */

echo Menu::widget([
    'activeCssClass' => "active",
    'activateParents' => true,
    'encodeLabels' => false,
    'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",
    'options' => ['class' => 'sidebar-menu'],
    'items' => [
        [
            'label' => 'Security Dashboard',
            'url' => ['/security/'],
            'options' => ['class' => 'sidebar-menu-item'],
            'template' => "<a class='sidebar-menu-button' href='{url}'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>
                {label}
            </a>",
        ],
        [
            'id' => 'components_menu',
            'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>
                List of Users
                <span class='ml-auto sidebar-menu-toggle-icon'></span>
            </a>",
            'items' => [
                [
                    'label' => 'Staffs',
                    'url' => ['/security/users/staffs'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Applicant',
                    'url' => ['/security/users/applicants'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Students',
                    'url' => ['/security/users/students'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
            ]
        ],
        [
            "label" => "Add New Staff",
            "url" => ["/security/users/create"],
            "template" => "<a class='sidebar-menu-button' href='{url}'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
        ],
        [
            "label" => "Logout",
            "url" => ["/admission/applicants/reports"],
            "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
        ],
    ],
]);

I need to have multiple 

'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",

with different id, the first one is setup_menu wish to add other id like access_levels etc

Solution

  • Move the submenuTemplate inside the parent item where you want a sub-menu to appear, currently, you are using one template for all the submenus whereas you need to use a separate template for each submenu, and assign different ids for all the submenus and the href for the parent item.

    For example, see the below image where you have multi-level collapsable submenus under List of Users 2 Levels Collapsable and other under the Add New Staff 1 Level.

    enter image description here

    You can use the following code, I copied the items under the existing submenu so you can change it accordingly but the idea is there. I used setup_menu_1 format to assign 3 different ids to the menus, change them too

    echo Menu::widget(
    [
        'activeCssClass' => "active",
        'activateParents' => true,
        'encodeLabels' => false,
        'options' => ['class' => 'sidebar-menu'],
        'items' => [
            [
                'label' => 'Security Dashboard',
                'url' => ['/security/'],
                'options' => ['class' => 'sidebar-menu-item'],
                'template' => "<a class='sidebar-menu-button' href='{url}'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>{label}</a>",
            ],
            [
                'id' => 'components_menu',
                'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_1'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>List of Users<span class='ml-auto sidebar-menu-toggle-icon'></span></a>",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_1'>\n{items}\n</ul>\n",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_3'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                        'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_3'>\n{items}\n</ul>\n",
                        'items' => [
                            [
                                'label' => 'Staffs',
                                'url' => ['/security/users/staffs'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Applicant',
                                'url' => ['/security/users/applicants'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Students',
                                'url' => ['/security/users/students'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                        ]
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Some Other Menu",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_2'>\n{items}\n</ul>\n",
                "template" => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_2'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'url' => ['/security/users/staffs'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Logout",
                "url" => ["/admission/applicants/reports"],
                "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
            ],
        ],
    ]
);