Create nestable lists that can be sorted by drag and drop.

The Nestable allows you to sort items through drag and drop. This is great, if you want to organize different categories or menu items in administration areas, for example.

---

Usage

A nestable list consists of the list itself and its items, a handle and a toggle.

Example

•  

   

  Item 1
•  

   

  Item 2
•  

   

  Item 3

Markup

<ul class="uk-nestable" data-uk-nestable>
    <li>
        <div class="uk-nestable-item">
            <div class="uk-nestable-handle"></div>
            <div data-nestable-action="toggle"></div>
            ...
        </div>
    </li>
</ul>

---

Sort multiple lists

To be able to sort items from one list to another, you can group them by adding the data-uk-nestable="{group:'GROUP-NAME'}" attribute to each list. By default, lists without any group name are automatically in the same group.

Example

•  

   

  Item 1
•  

   

  Item 2
•  

   

  Item 3

Second list

•  

   

  Item 4

Markup

<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>
<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>

---

Disable nesting

To disable nesting of list items, just add the data-uk-nestable="{maxDepth:1}" attribute. You can also use this data attribute to determine to what depth nesting is possible.

•  

   

  Item 1
•  

   

  Item 2
•  

   

  Item 3

Markup

<ul class="uk-nestable" data-uk-nestable="{maxDepth:1}">...</ul>

---

JavaScript options

This is an example of how to set options via attribute:

data-uk-nestable="{maxDepth:0, group:'widgets'}"

Init element manually

var nestable = UIkit.nestable(element, { /* options */ });

Events