How to add custom classes to Laravel Voyager menu items

Question

I have main menu in Voyager which has some items in it (navbar buttons). I output all of the items in my blade view with

{{menu('main', 'bootstrap')}}

Problem is that all of the items (navbar buttons) have the same look to them. I have custom classes for them in my style.css file but I could not find a way to style all the items differently. Database menu does not provide a menu_items table where I could add my own classes either.

Answer 1

I figured out that you have to use {{menu('main', '_json')}} and afterwards you iterate each of the items in a foreach loop and do whatever you want with them.

Answer 2

There are various methods to do this:

Method 1: If you are using the bootstrap in that case you can use the below code inside your blade template. Make sure to change the FrontendMenu as per the menu name that you added in the backend.

{{ menu('FrontendMenu', 'bootstrap') }}  

Method 2: If you want to add custom style and make more changes to the menu in that case you can follow the below steps.

• Go to the path projectname\vendor\tcg\voyager\resources\views\menu
• Copy the default.blade.php and paste it inside projectname\resources\views
• And rename it as mymenu.blade.php
• And change the menu code in template from {{ menu('FrontendMenu', 'bootstrap') }} to {{ menu('FrontendMenu', 'mymenu') }}
• Then finally you can make any changes inside mymenu.blade.php that you want to do you can add class to ul, li and make changes in html as well.

Refrecen Video