Laravel Nova: Custom Navigation
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
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
Lastly, do remove the following codes in
Now, you should be able to have your own menu in your main dashboard.