---
title: Tree Views
slug: ui-tree
---
{% extends "layouts/components.html" %}

{% block page %}
<!-- Breadcrumb -->
<ol class="breadcrumb">
	<li><a href="index.html">Home</a></li>
	<li class="active">Tree</li>
</ol>
<!-- // END Breadcrumb -->

<!-- Jumbotron -->
<div class="jumbotron">
	<p class="lead">Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, 
	keyboard, checkboxes, tables, drag and drop, and lazy loading. Fancytree is a sequel of the popular DynaTree plugin.</p>
</div>
<!-- // END Jumbotron -->

<h4>Tree</h4>
<div class="card">
	<div class="card-block">
		<div data-toggle="tree">
			<ul style="display: none;">
				<li>item1</li>
				<li>item2</li>
				<li class="folder">
					Folder <em>with some</em> children
					<ul>
						<li>Sub-item 3.1
							<ul>
								<li>Sub-item 3.1.1</li>
								<li>Sub-item 3.1.2</li>
							</ul>
						</li>
						<li>Sub-item 3.2
							<ul>
								<li>Sub-item 3.2.1</li>
								<li>Sub-item 3.2.2</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="expanded">
					Document with some children (expanded on init)
					<ul>
						<li class="active focused expanded">Sub-item 4.1 (expanded, active and focused on init)
							<ul>
								<li>Sub-item 4.1.1</li>
								<li>Sub-item 4.1.2</li>
							</ul>
						</li>
						<li>Sub-item 4.2
							<ul>
								<li>Sub-item 4.2.1</li>
								<li>Sub-item 4.2.2</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<h4>With Multiple Selection</h4>
<div class="card">
	<div class="card-block">
		<div data-toggle="tree" data-tree-checkbox data-tree-select="3">
			<ul style="display: none;">
				<li>item1</li>
				<li class="selected">item2 (selected on init)</li>
				<li class="folder">
					Folder <em>with some</em> children
					<ul>
						<li>Sub-item 3.1
							<ul>
								<li>Sub-item 3.1.1</li>
								<li>Sub-item 3.1.2</li>
							</ul>
						</li>
						<li>Sub-item 3.2
							<ul>
								<li>Sub-item 3.2.1</li>
								<li>Sub-item 3.2.2</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="expanded">
					Document with some children (expanded on init)
					<ul>
						<li class="expanded">
							Sub-item 4.1 (expanded on init)
							<ul>
								<li class="selected">Sub-item 4.1.1 (selected on init)</li>
								<li class="selected">Sub-item 4.1.2 (selected on init)</li>
							</ul>
						</li>
						<li>Sub-item 4.2
							<ul>
								<li>Sub-item 4.2.1</li>
								<li>Sub-item 4.2.2</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<h4>With Single Selection</h4>
<div class="card">
	<div class="card-block">
		<div data-toggle="tree" data-tree-checkbox data-tree-select="1">
			<ul style="display: none;">
				<li>item1</li>
				<li class="selected">item2 (selected on init)</li>
				<li class="folder">
					Folder <em>with some</em> children
					<ul>
						<li>Sub-item 3.1
							<ul>
								<li>Sub-item 3.1.1</li>
								<li>Sub-item 3.1.2</li>
							</ul>
						</li>
						<li>Sub-item 3.2
							<ul>
								<li>Sub-item 3.2.1</li>
								<li>Sub-item 3.2.2</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="expanded">
						Document with some children (expanded on init)
						<ul>
							<li class="expanded">Sub-item 4.1 (expanded on init)
								<ul>
									<li>Sub-item 4.1.1</li>
									<li>Sub-item 4.1.2</li>
								</ul>
							</li>
							<li>Sub-item 4.2
								<ul>
									<li>Sub-item 4.2.1</li>
									<li>Sub-item 4.2.2</li>
								</ul>
							</li>
						</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<h4>With Drag &amp; Drop</h4>
<div class="card">
	<div class="card-block">
		<div data-toggle="tree" data-tree-dnd>
			<ul style="display: none;">
				<li>item1</li>
				<li class="selected">item2 (selected on init)</li>
				<li class="folder">
					Folder <em>with some</em> children
					<ul>
						<li>Sub-item 3.1
							<ul>
								<li>Sub-item 3.1.1</li>
								<li>Sub-item 3.1.2</li>
							</ul>
						</li>
						<li>Sub-item 3.2
							<ul>
								<li>Sub-item 3.2.1</li>
								<li>Sub-item 3.2.2</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="expanded">
					Document with some children (expanded on init)
					<ul>
						<li class="expanded">Sub-item 4.1 (expanded on init)
							<ul>
								<li>Sub-item 4.1.1</li>
								<li>Sub-item 4.1.2</li>
							</ul>
						</li>
						<li>Sub-item 4.2
							<ul>
								<li>Sub-item 4.2.1</li>
								<li>Sub-item 4.2.2</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>
{% endblock %}

{% block vendor_styling %}
	<!-- Vendor CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="examples/css/fancytree.min.css">
{% endblock %}

{% block vendor_scripts %}
	<!-- TREE JS -->
	<script src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
	<script src="assets/vendor/jquery.fancytree-all.min.js"></script>
{% endblock%}

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