---
title: Nestable
slug: ui-nestable
---
{% extends "layouts/components.html" %}

{% block page %}
<ol class="breadcrumb">
	<li><a href="index.html">Home</a></li>
	<li class="active">Nestable</li>
</ol>

<div class="jumbotron">
	<p class="lead">Nestable is a component for hierarchical lists with drag &amp; drop capabilities, compatible with both mouse events and touch enabled devices.</p>
</div>
<div class="row">
	<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
		<h4 class="page-section-heading">Draggable Items</h4>
		<div class="nestable" id="nestable">
			<ul class="nestable-list">
				<li class="nestable-item" data-id="1">
					<div class="nestable-handle">Item 1</div>
				</li>
				<li class="nestable-item" data-id="2">
					<div class="nestable-handle">Item 2</div>
					<ul class="nestable-list">
						<li class="nestable-item" data-id="2.1">
							<div class="nestable-handle">Item 2.1</div>
						</li>
						<li class="nestable-item" data-id="2.2">
							<div class="nestable-handle">Item 2.2</div>
							<ul class="nestable-list">
								<li class="nestable-item" data-id="2.3.1">
									<div class="nestable-handle">Item 2.2.1</div>
								</li>
								<li class="nestable-item" data-id="2.3.2">
									<div class="nestable-handle">Item 2.2.2</div>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<hr/>
		<h4 class="page-section-heading">Draggable Handles (Default color)</h4>
		<div class="nestable" id="nestable-handles">
			<ul class="nestable-list">
				<li class="nestable-item nestable-item-handle" data-id="1">
					<div class="nestable-handle"><i class="material-icons">menu</i></div>
					<div class="nestable-content">Item 1</div>
				</li>
				<li class="nestable-item nestable-item-handle" data-id="2">
					<div class="nestable-handle"><i class="material-icons">menu</i></div>
					<div class="nestable-content">Item 2</div>
				</li>
				<li class="nestable-item nestable-item-handle" data-id="3">
					<div class="nestable-handle"><i class="material-icons">menu</i></div>
					<div class="nestable-content">Item 3</div>
					<ul class="nestable-list">
						<li class="nestable-item nestable-item-handle" data-id="3.1">
							<div class="nestable-handle"><i class="material-icons">menu</i></div>
							<div class="nestable-content">Item 3.1</div>
						</li>
						<li class="nestable-item nestable-item-handle" data-id="3.2">
							<div class="nestable-handle"><i class="material-icons">menu</i></div>
							<div class="nestable-content">Item 3.2</div>
						</li>
						<li class="nestable-item nestable-item-handle" data-id="3.3">
							<div class="nestable-handle"><i class="material-icons">menu</i></div>
							<div class="nestable-content">Item 3.3</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<hr/>
		<h4 class="page-section-heading">Draggable Handles (Primary color)</h4>
		<div class="nestable nestable-handle-primary" id="nestable-handles-primary">
			<ul class="nestable-list">
				<li class="nestable-item nestable-item-handle" data-id="1">
					<div class="nestable-handle"><i class="material-icons">menu</i></div>
					<div class="nestable-content">Item 1</div>
				</li>
				<li class="nestable-item nestable-item-handle" data-id="2">
					<div class="nestable-handle"><i class="material-icons">menu</i></div>
					<div class="nestable-content">Item 2</div>
				</li>
				<li class="nestable-item nestable-item-handle" data-id="3">
					<div class="nestable-handle"><i class="material-icons">menu</i></div>
					<div class="nestable-content">Item 3</div>
					<ul class="nestable-list">
						<li class="nestable-item nestable-item-handle" data-id="3.1">
							<div class="nestable-handle"><i class="material-icons">menu</i></div>
							<div class="nestable-content">Item 3.1</div>
						</li>
						<li class="nestable-item nestable-item-handle" data-id="3.2">
							<div class="nestable-handle"><i class="material-icons">menu</i></div>
							<div class="nestable-content">Item 3.2</div>
						</li>
						<li class="nestable-item nestable-item-handle" data-id="3.3">
							<div class="nestable-handle"><i class="material-icons">menu</i></div>
							<div class="nestable-content">Item 3.3</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>
{% endblock %}

{% block vendor_styling %}
	<!-- Vendor CSS -->
	<link rel="stylesheet" href="examples/css/nestable.min.css">
{% endblock %}

{% block vendor_scripts %}
	<!-- Vendor JS -->
	<script src="assets/vendor/jquery.nestable.js"></script>
{% endblock%}

{% block example_scripts %}
	<!-- Initialize -->
	<script src="examples/js/nestable.js"></script>
{% endblock %}