Nested menu items for each menu

[nazar-goyda]

Hello guys. Do we have a feature like a nested menu? For example, I have a Menu model and a MenuItems model (relationship 1-n). This means I can have many menus, and each menu can have many menu items. Can we create nested menu items for each menu (with sortable, like reorder functionality)? I wanted to have this ability in create/update pages. Because in CRUD I'm working with Menu model only. Menu items I added with subfields Maybe we already have this feature.

 protected function setupCreateOperation()
    {
        CRUD::setValidation(MenuRequest::class);
        CRUD::addField([
            'name' => 'name',
            'label' => 'Назва меню'
        ]);
        CRUD::addField([
            'name' => 'items',
            'type' => 'relationship',
            'force_delete'  => true,
            'label' => 'Пункти меню',
            'sortable'   => true,
            'subfields' => [
                [
                    'name' => 'text',
                    'label' => 'Текст ссилки',
                    'wrapper'=>[
                        'class'=>'col-md-5'
                    ]
                ],
                [
                    'name' => 'link',
                    'label' => 'Ссилка',
                    'wrapper'=>[
                        'class'=>'col-md-5'
                    ]
                ],
                [
                    'name' => 'sequence',
                    'label' => 'Порядок',
                    'wrapper'=>[
                        'class'=>'col-md-2 mb-3'
                    ]
                ],
                [
                    'name' => 'image',
                    'label' => 'Картинка',
                    'type' => 'browse',
                    'wrapper'=>[
                        'class'=>'col-md-6'
                    ]
                ],
                [
                    'name' => 'icon',
                    'label' => 'Іконка',
                    'type' => 'browse',
                    'wrapper'=>[
                        'class'=>'col-md-6 mb-3'
                    ]
                ]
            ]

        ]);
    }

[backpack-ai-bot[bot]]

Yes, Backpack does provide functionality for nested menu items with reordering capabilities. This can be achieved using the Reorder Operation, which allows for both reordering and nesting of entries.

Here's how you can implement this for your Menu and MenuItems models:

1. First, ensure your MenuItems model has the required fields for reordering: parent_id, lft, rgt, and depth. These should be integer fields with a default value of 0, and parent_id should be nullable.

2. In your MenuItemsCrudController, use the ReorderOperation trait and set up the reorder operation:

use \Backpack\CRUD\app\Http\Controllers\Operations\ReorderOperation;

protected function setupReorderOperation()
{
    CRUD::set('reorder.label', 'name'); // replace 'name' with the field you want to show
    CRUD::set('reorder.max_level', 3); // set the maximum nesting level
}

3. Make sure to add a children() relationship to your MenuItems model:

public function children()
{
    return $this->hasMany(self::class, 'parent_id');
}

This setup will allow you to reorder and nest menu items for each menu.

For more detailed information on setting up and using the Reorder Operation, you can refer to the Reorder Operation documentation.

If you need to display these nested menu items in your application, you can use Backpack's menu components. As of version 6.2+, Backpack supports multi-level menu dropdowns. You can create nested menu dropdowns by using the nested="true" attribute on your sub-dropdowns.

For example:

<x-backpack::menu-dropdown title="Parent Menu" icon="la la-group">
    <x-backpack::menu-dropdown-item title="Child Item 1" />
    <x-backpack::menu-dropdown title="Nested Menu" icon="la la-question" nested="true">
        <x-backpack::menu-dropdown-item title="Nested Child Item 1" />
        <x-backpack::menu-dropdown-item title="Nested Child Item 2" />
    </x-backpack::menu-dropdown>
</x-backpack::menu-dropdown>

For more information on creating nested menu dropdowns, you can check the Base Components documentation.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): [Feature][3.4] Set initial CrudPanel properties on CrudController
Github Issue (closed): enableReorder() doesn't work with parent_id with constraint?
3. Advanced Features|3. Advanced Features
Features (Free vs Paid)|Features (Free vs Paid)
Github Issue (closed): [Bug] Reorder not working properly for large lists
Reorder Operation|How to Use
CRUD API|Reorder Operation
Github Issue (closed): [Feature Request] Multiple level sidebar menu
add nested menu dropdowns to crud
Github Issue (closed): [Feature Request] Add row reorder to List operation
Github Issue (closed): V6 multilevel menu items
Install Optional Packages|MenuCrud
Github Issue (closed): Menu Ordering: can't move parent menus
[Feature][3.5][Ready] Select 2 nested

[jcastroa87]

Hello @nazar-goyda

Do you have a change to check our Addon MenuCRUD

Let me know if thats work for you.

Cheers.

[nazar-goyda]

Hello. As i saw this Addon only for one menu. I would want to have such feature in edit/create page for several menus. And create several menu items in one page, and don't use for each item each create/update page.