New in v6: A larger layout for your large set of menu items.

I'm running an e-commerce website and its admin panel is built on the Backpack. It keeps growing with many CRUDs and features. This als...

I'm running an e-commerce website and its admin panel is built on the Backpack. It keeps growing with many CRUDs and features. This also means that menu items are growing too. I wondered about a better way to place them and @pxpm came up with this excellent solution.👇

A menu dropdown with column support.

@pxpm named it "Menu Dropdown Column"

Tabler theme provides this new component to create side-by-side menus on horizontal layouts. I find it a perfect solution to keep menu items much more orgaranized and visible.

You make only Two small changes to have it in your project. If you are reading this far, I'm sure you are eager to organize your oversized project menu items with it.

This has two Requirements:

• You should be on Backpack/CRUD:6.6.4 or higher
• You should be on Backpack/theme-tabler:1.2.1 or higher

Steps:

• Enable the feature by adding :withColumns="true" in your parent dropdown item.
• Then, wrap each set of menu items with the <x-theme-tabler::menu-dropdown-column> component. See the example below:

-<x-backpack::menu-dropdown title=" Vet Clinic" icon="las la-clinic-medical">
+<x-backpack::menu-dropdown :withColumns="true" title=" Vet Clinic" icon="las la-clinic-medical">

+       <x-theme-tabler::menu-dropdown-column>
            <x-backpack::menu-dropdown-item title=" Appointments" icon="las la-calendar-check" link="https://example.com" />
            <x-backpack::menu-dropdown-item title=" Medical Records" icon="las la-file-medical" link="https://example.com" />
            <x-backpack::menu-dropdown-item title=" Prescriptions" icon="las la-prescription" link="https://example.com" />
+        </x-theme-tabler::menu-dropdown-column>

+        <x-theme-tabler::menu-dropdown-column>
            <x-backpack::menu-dropdown-item title=" Pet Vaccinations" icon="las la-syringe" link="https://example.com" />
            <x-backpack::menu-dropdown-item title=" Pet Grooming" icon="las la-cut" link="https://example.com" />
            <x-backpack::menu-dropdown-item title=" Pet Boarding" icon="las la-home" link="https://example.com" />
+        </x-theme-tabler::menu-dropdown-column>

</x-backpack::menu-dropdown>

Conclusion

We just explored a new Backpack menu component to place a large set of menu items. It is very similar to the Mega menu and I like the way it is because the Mega menu would look so empty with its full width.

If you like this little feature, please share it with your backpack colleagues. Cheers!