Multilevel Menu Editor for Bootstrap 4

Multilevel Menu Editor for Bootstrap 4.x (Html & Javascript code). This jQuery Menu Editor plugin enables you to dynamically create a drag’n’drop, multi-level menu builder/creator/generator for your Bootstrap 4 and Bootstrap 3 website.

Features

• Add, Update & Remove items from Menu
• Multilevel Drag & Drop
• Form Item Editor
• Include IconPicker Plugin
• Support to mobile devices
• Load data from JSON string
• The output is a Json string

Libraries

This project was inspirated and based in jQuery-Sortable-lists http://camohub.github.io/jquery-sortable-lists/index.html and added many features.

Requirements

• Bootstrap 4.x
• jQuery >= 3.x
• Fontawesome 5.3.1
• Bootstrap Iconpicker 1.10.0

Include the required JS and CSS Library.

Creating the Drag & Drop list.

Creating the form

• The inputs for items should be have the class=”item-menu”
• The icon picker should be have the id=[LIST_ID]+”_icon”

    
Edit item
        

        

        

        Text
        

        
        

        
        
        
        
        
        

        URL
        
        
        

        Target
        
        Self
        Blank
        Top
        
        
        

        Tooltip
        
        
        
        
    

         Update
         Add
    

Create and Setting the MenuEditor object

// icon picker options
var iconPickerOptions = {searchText: "Buscar...", labelHeader: "{0}/{1}"};
// sortable list options
var sortableListOptions = {
    placeholderCss: {'background-color': "#cccccc"}
};
var editor = new MenuEditor('myEditor', {listOptions: sortableListOptions, iconPicker: iconPickerOptions});
editor.setForm($('#frmEdit'));
editor.setUpdateButton($('#btnUpdate'));
//Calling the update method
$("#btnUpdate").click(function(){
    editor.update();
});
// Calling the add method
$('#btnAdd').click(function(){
    editor.add();
});

Load data from a Json

var arrayjson = [{"href":"http://home.com","icon":"fas fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fas fa-chart-bar","text":"Opcion2"},{"icon":"fas fa-bell","text":"Opcion3"},{"icon":"fas fa-crop","text":"Opcion4"},{"icon":"fas fa-flask","text":"Opcion5"},{"icon":"fas fa-map-marker","text":"Opcion6"},{"icon":"fas fa-search","text":"Opcion7","children":[{"icon":"fas fa-plug","text":"Opcion7-1","children":[{"icon":"fas fa-filter","text":"Opcion7-1-1"}]}]}];
editor.setData(arrayJson);

Handle the output.

var str = editor.getString();
$("#myTextarea").text(str);

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by davicotico. Visit their official github repository for more information and follow for future updates.