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

Question

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

this to be similar to this

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>

first level is your icons. Second level must be "Vouchers" and "View All" and "Create New" have to be in your third level. Do you have script for dropdown menu that is collapsable? Find it and then set your classs to "Vouchers" `
am not following you, yes have a sidebar-xs class for collapsed sidebar. — Sourabh Shah, Dec 08 '20 at 14:06
show generated html from Menu widget. Is it what you expect? What do you want to change in generated html? — vvpanchev, Dec 08 '20 at 15:02
I want it similar to screen shot #1 but having voucher label at top — Sourabh Shah, Dec 09 '20 at 06:11
Do you have the script that you want to achieve or no? Show html structure (html code/script) that you expect and show html that si generated from menu widget? Let's compare them and see whereyour error is. — vvpanchev, Dec 09 '20 at 06:55
Please edit your question and set your formatted vode there. Well what I see is that you have `ul` that is submenu, but I also asked if you have script for dropdown menu — vvpanchev, Dec 10 '20 at 15:58
have updated the question there is no script just plain add and remove class — Sourabh Shah, Dec 10 '20 at 17:07

Sourabh Shah · Accepted Answer · 2020-12-11T19:18:58.030

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',
                        ],

                    ];

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

1 Answers1