Laravel Nova: Custom Navigation
Assalamualaikum,
Today I’m gonna share how to customise the Laravel Nova sidebar to use Dashboard component as menu.
First, you need to create new dashboard – php artisan nova:dashboard nasrul-hazim/dashboard-menu
.
This will create nova-components/DashboardMenu
package.
Next, you need to understand that, anything about data, Laravel nova using their own nova-api
, which in our case, we need some data to populate the menu.
So how do we populate the menu data? You can refer to vendor/laravel/nova/resources/views/resources/navigation.blade.php
. See the loop part – I have extracted the codes as in following:
As you can see in populateMenus()
method, I have extracted the codes from the original blade file to display the menu. With those, I can have the information about the menus.
Once you have the menu information, in your nova-components/DashboardMenu/resources/js/components/Card.vue
, you can start manipulate the data which to generate the view. Following are the sample code:
Above code will generate a collapsible menu in dashboard.
To display this menu in main dashboard, you can register the card in the app/Providers/NovaServiceProvider.php
.
Lastly, do remove the following codes in resources/views/vendor/nova/layout.blade.php
Now, you should be able to have your own menu in your main dashboard.
Thanks,
Nasrul Hazim