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.

  • 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


This project was inspirated and based in jQuery-Sortable-lists and added many features.


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

Include the required JS and CSS Library.

<!-- the css in the <head> -->
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css">
<!-- (Recommended) Just before the closing body tag </body> -->
<script type="text/javascript" src=''></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js"></script>
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>
<script type="text/javascript" src="jquery-menu-editor.min.js"></script>

Creating the Drag & Drop list.

<ul id="myEditor" class="sortableLists list-group">

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”
<div class="card border-primary mb-3">
    <div class="card-header bg-primary text-white">Edit item</div>
        <div class="card-body">
        <form id="frmEdit" class="form-horizontal">
        <div class="form-group">
        <label for="text">Text</label>
        <div class="input-group">
        <input type="text" class="form-control item-menu" name="text" id="text" placeholder="Text">
        <div class="input-group-append">
        <button type="button" id="myEditor_icon" class="btn btn-outline-secondary"></button>
        <input type="hidden" name="icon" class="item-menu">
        <div class="form-group">
        <label for="href">URL</label>
        <input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
        <div class="form-group">
        <label for="target">Target</label>
        <select name="target" id="target" class="form-control item-menu">
        <option value="_self">Self</option>
        <option value="_blank">Blank</option>
        <option value="_top">Top</option>
        <div class="form-group">
        <label for="title">Tooltip</label>
        <input type="text" name="title" class="form-control item-menu" id="title" placeholder="Tooltip">
    <div class="card-footer">
        <button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fas fa-sync-alt"></i> Update</button>
        <button type="button" id="btnAdd" class="btn btn-success"><i class="fas fa-plus"></i> Add</button>

Create and Setting the MenuEditor object

var iconPickerOptions = {searchText: "Buscar...", labelHeader: "{0}/{1}"};

var sortableListOptions = {
    placeholderCss: {'background-color': "#cccccc"}
var editor = new MenuEditor('myEditor', {listOptions: sortableListOptions, iconPicker: iconPickerOptions});



Load data from a Json

var arrayjson = [{"href":"","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"}]}]}];

Handle the output.

var str = editor.getString();

See live demo and download source code.


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