Using Multiple Menus in Laravel Voyager

Perhaps you would have heard about Voyager! It is an awesome package created by The Control Group that provides a complete admin system to quickly scaffold out your laravel app.

This article shows the steps to be taken to create a new Menu and use it within your application. This article also, proffers a solution to the problem where the links don't work when a new Menu is created due to the check for $menuName == 'admin' in src/Models/Menu.php of the Voyager package.

Note: This article assumes you are already aware of Voyager and can install it. You can find more information about voyager here

Follow the steps below to create a new menu:

1. Go to Tools and click on Menu Builder
2. Click on Add New, provide the name of the new Menu and Save   
   it.
3. You can then add menu items to it to fit your needs

Note that the file vendor/tcg/voyager/resources/views/dashboard/sidebar.blade.php contains the part of the package where the menu bar is displayed. Follow the following steps to customise it:

1. Create a file sidebar.blade.php inside views/vendor/voyager/dashboard directory.
2. Copy the contents of the sidebar.blade.php in vendor/tcg/voyager/resources/views/dashboard directory to your new sidebar.blade.php in views/vendor/voyager/dashboard directory.

You can then update <admin-menu :items="{{ menu('admin', '_json') }}"></admin-menu> to use any Menu of your choice by changing 'admin' to the name of the new menu you created.

And that is it ... You are done 😎

Note

As at Voyager version 1.4, you most likely will realise that the link will not work. That is due to the check for $menuName == 'admin' in src/Models/Menu.php of the Voyager package. Follow the steps below to solve this problem permanently.

Create a helper method (global) with the codes below. You can follow the tutorial here to see how to create helper classes, methods or variables.

I am using menu_display as the name of my method, you can use any name of your choice.

<?php

if (!function_exists('menu_display')) {
    function menu_display($menuName, $type = null, array       
       $options = [])
    {
        return \App\Menu::display($menuName, $type, $options);
    }
}

Create a Class Menu.php inside your app folder and copy the contents of Menu.php in vendor/tcg/voyager/src/Models folder to your new Menu.php in app folder. Remember to update the namespace and update these lines of code in the display function of the Menu.php file as seen below:

if ($type == '_json') {
    $items = static::processItems($items);
}

Remember to update the code in sidebar.blade.php file in the views/vendor/voyager/dashboard directory from <admin-menu :items="{{ menu('admin', '_json') }}"></admin-menu> to <admin-menu :items="{{ menu_display('admin', '_json') }}"></admin-menu>.

And that is it... You are good!

Thoughts

I'd love to hear your thoughts. Let me know in the comments section on twitter or on LinkedIn