Search code examples
yii2yii2-widget

Yii2 Menu widget - how to set data-submenu-title for yii2 menu widget

I currently have a menu widget having following items this is item#1


 $menuIteams[] = [

                                'label'    => 'Vouchers',
                                'url'      => '#',
                                'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
                        {label}
                        <span class="d-block font-weight-normal opacity-50"></span> </a>',
                                'items'    => [
                                    ['label' => 'View All', 'url' => ['/voucher/index'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-copy3"></i> {label}<span> </a>'],
                                    ['label' => 'Create New', 'url' => ['/voucher/create'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-pen6"></i> {label}<span> </a>'],
                                ],
                                'options'  => [
                                    'class'              => 'nav-item nav-item-submenu',
                                    'data-submenu-title' => 'Layouts',
                                ],

                            ];

and am appending all items to menu widget

echo \yii\widgets\Menu::widget([
                        'options'         => [
                            'class'         => 'nav nav-sidebar',
                            'data-nav-type' => 'accordion',
                        ],
                        'items'           => $menuIteams,
                        'itemOptions'     => array('class' => 'nav-item'),
                        'submenuTemplate' => "\n<ul class='nav nav-group-sub'>\n{items}\n</ul>\n",
                        'encodeLabels'    => false, //allows you to use html in labels
                        'activateParents' => false,
                    ]);

I want to my menuIteams[] {label} to appear on top of each respective sub menu item

So for above example Vouchers would appear on top of sub menu followed by list of items

Explained better with images

enter image description here

this to be similar to this

enter image description here

Of course the sidebar should be collapsed and sub menu should appear as a dropdown similar to be image#1

Html Rendered

<li class="nav-item nav-item-submenu" data-submenu-title="Layouts"><a href="#" class="nav-link"><i class="fas fa-print"></i> <span>
                        Print Digital
                        <span class="d-block font-weight-normal opacity-50"></span> </a>
<ul class='nav nav-group-sub' data-submenu-title=<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>
</ul>
</li>

Expected

<li class="nav-item nav-item-submenu nav-item-open">
                            <a href="#" class="nav-link"><i class="icon-color-sampler"></i> <span>Themes</span></a>

                            <ul class="nav nav-group-sub" data-submenu-title="Themes" style="display: block;">
                                <li class="nav-item"><a href="index.html" class="nav-link active">Default</a></li>
                                <li class="nav-item"><a href="../../../LTR/material/full/index.html" class="nav-link">Material</a></li>
                                <li class="nav-item"><a href="../../../LTR/dark/full/index.html" class="nav-link">Dark</a></li>
                                <li class="nav-item"><a href="../../../LTR/clean/full/index.html" class="nav-link disabled">Clean <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
                            </ul>
                        </li>
Solution

  • Figured it out from How to fetch data from database and set as submenus in yii2?

    Had to move submenu template from menu widget to $menuIteams[]

    $menuIteams[] = [

                        'label'    => 'Cash Requisition',
                        'submenuTemplate' => "\n<ul class='nav nav-group-sub' data-submenu-title='Cash Requisition'>\n{items}\n</ul>\n",
                        'url'      => '#',
                        'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
                        {label}
                        <span class="d-block font-weight-normal opacity-50"></span> </a>',
                        'items'    => [
                            ['label' => 'View All Cash Requisitions', 'url' => ['/voucher/index'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-copy3"></i> {label}<span> </a>'],
                            ['label' => 'Create New Cash Requisition', 'url' => ['/voucher/create'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-pen6"></i> {label}<span> </a>'],
                        ],
                        'options'  => [
                            'class'              => 'nav-item nav-item-submenu',
                        ],

                    ];