page-trees.html

---
layout: default
title: Tree Selectors
permalink: /trees/
id: trees
is_searchable: true
---

<section class="sui-row-with-sidenav">

	<!-- Navigation -->
	<div class="sui-sidenav" role="navigation">

		<ul class="sui-vertical-tabs sui-sidenav-hide-md">

			<li class="sui-vertical-tab current">
				<a href="#" role="button" data-tab="tree-sui">SUI Tree</a>
			</li>

			<li class="sui-vertical-tab">
				<a href="#" role="button" data-tab="tree-fancy">Fancy Tree</a>
			</li>

			<li class="sui-vertical-tab">
				<a href="#" role="button" data-tab="documentation">Documentation</a>
			</li>

		</ul>

		<div class="sui-sidenav-settings">

			<div class="sui-form-field sui-sidenav-hide-lg">
	
				<select class="sui-select">
					<option value="tree-sui">SUI Tree</option>
					<option value="tree-fancy">Fancy Tree</option>
					<option value="documentation">Documentation</option>
				</select>
	
			</div>
	
		</div>

	</div>

	<!-- TREE: Simple tree -->
	<div class="sui-box" data-tab="tree-sui">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Tree Selectors</h2>
		</div>

		<div class="sui-box-body">

			<p>Most common uses are bulk selections of sub-options, and a file/directory browser.</p>

			<!-- Selector -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">

					<span class="sui-settings-label">Selector</span>
					<p class="sui-description">Mostly used as a tree structure for selection which options a user wants when there are nested options.</p>
					<p class="sui-description">A good example is excluding tables from databases.</p>

				</div>

				<div class="sui-box-settings-col-2">

					<ul class="sui-tree" data-tree="selector" role="group">

						<li role="treeitem" aria-expanded="true" aria-selected="true">

							<div class="sui-tree-node">
								<label for="treeselector-level-1" class="sui-node-checkbox">
									<input type="checkbox" id="treeselector-level-1" />
									<span aria-hidden="true"></span>
									<span>Select this item (Checkbox)</span>
								</label>
								<span class="sui-node-text">Parent / Group</span>
								<button data-button="expander">
									<span aria-hidden="true"></span>
									<span class="sui-screen-reader-text">Expand or compress item</span>
								</button>
							</div>

							<!-- LEVEL: 1 -->
							<ul role="group">

								<li role="treeitem">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span class="sui-node-text">Child / Group</span>
										<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
									</span>

									<!-- LEVEL: 2 -->
									<ul role="group">

										<li role="treeitem">
											<div class="sui-tree-node">
												<label for="treeselector-level-2" class="sui-node-checkbox">
													<input type="checkbox" id="treeselector-level-2" />
													<span aria-hidden="true"></span>
													<span>Select this item</span>
												</label>
												<span class="sui-node-text">Sub Child Item</span>
												<button data-button="expander">
													<span aria-hidden="true"></span>
													<span class="sui-screen-reader-text">Expand or compress item</span>
												</button>
											</div>
										</li>

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

									</ul>

								</li>

								<li role="treeitem" aria-expanded="true">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span class="sui-node-text">Child / Group</span>
										<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
									</span>

									<!-- LEVEL: 2 -->
									<ul role="group">

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

									</ul>

								</li>

							</ul>

						</li>

						<li role="treeitem">

							<span class="sui-tree-node">
								<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
								<span class="sui-node-text">Parent / Group</span>
								<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
							</span>

							<!-- LEVEL: 1 -->
							<ul role="group">

								<li role="treeitem">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span class="sui-node-text">Child / Group</span>
										<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
									</span>

									<!-- LEVEL: 2 -->
									<ul role="group">

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

										<li role="treeitem">
											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span class="sui-node-text">Sub Child Item</span>
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
											</span>
										</li>

									</ul>

								</li>

							</ul>

						</li>

						<li role="treeitem" aria-selected="true">

							<span class="sui-tree-node">
								<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
								<span class="sui-node-text">Parent / Single</span>
							</span>

						</li>

						<li role="treeitem" aria-selected="true" aria-disabled="true">

							<span class="sui-tree-node">
								<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
								<span class="sui-node-text">Parent / Single (Disabled)</span>
							</span>

						</li>

					</ul>

				</div>

			</div>

			<!-- Directory Browser -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">

					<span class="sui-settings-label">Directory Browser</span>
					<span class="sui-description">Used for browsing and selecting files and folders. Most common use case can be found in Smush’s Directory Browsing feature.</span>

				</div>

				<div class="sui-box-settings-col-2">

					<div class="sui-notice sui-notice-warning">
						<p>Directory browser allows you to have a simple form to add extra folders. Search for the "+" button to try it.</p>
					</div>

					<ul class="sui-tree" data-tree="directory" role="group">

						<li role="treeitem" aria-expanded="false" aria-selected="false" aria-disabled="true">

							<span class="sui-tree-node">
								<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
								<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
								<span aria-hidden="true"></span>
								<span class="sui-node-text">wp-admin</span>
								<span role="button" data-button="add" aria-label="Add folder"></span>
							</span>

							<ul role="group">

								<li role="treeitem" aria-selected="false">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">file.php</span>
									</span>

								</li>

								<li role="treeitem" aria-selected="false">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">file.php</span>
									</span>

								</li>

								<li role="treeitem" aria-selected="false">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">file.php</span>
									</span>

								</li>

							</ul>

						</li>

						<li role="treeitem" aria-expanded="true" aria-selected="false">

							<span class="sui-tree-node">
								<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
								<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
								<span aria-hidden="true"></span>
								<span class="sui-node-text">wp-content</span>
								<span role="button" data-button="add" aria-label="Add folder"></span>
							</span>

							<ul role="group">

								<div role="contentinfo" aria-hidden="true">

									<span id="suitree-input-label" class="sui-screen-reader-text">Folder name</span>

									<span role="form">
										<input
											type="text"
											value="New folder name"
											placeholder="New folder name"
											id="suitree-input"
											aria-labelledby="suitree-input-label"
										/>
										<span role="button">
											<span class="sui-screen-reader-text">Save</span>
										</span>
									</span>

									<span role="button" data-button="remove">
										<span class="sui-screen-reader-text">Remove folder</span>
									</span>

								</div>

								<li role="treeitem" aria-expanded="false" aria-selected="false">

									<span class="sui-tree-node">
										<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">plugins</span>
									</span>

									<ul role="group">

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span data-type="forminator" aria-hidden="true"></span>
												<span class="sui-node-text">Forminator</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

											</ul>

										</li>

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span data-type="hummingbird" aria-hidden="true"></span>
												<span class="sui-node-text">Hummingbird</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

											</ul>

										</li>

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span data-type="hustle" aria-hidden="true"></span>
												<span class="sui-node-text">Hustle</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

											</ul>

										</li>

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span aria-hidden="true"></span>
												<span class="sui-node-text">hello.php</span>
											</span>

										</li>

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span aria-hidden="true"></span>
												<span class="sui-node-text">index.php</span>
											</span>

										</li>

									</ul>

								</li>

								<li role="treeitem" aria-expanded="true" aria-selected="false">

									<span class="sui-tree-node">
										<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">themes</span>
									</span>

									<ul role="group">

										<li role="treeitem" aria-expanded="true" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span aria-hidden="true"></span>
												<span class="sui-node-text">divi</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-expanded="true" aria-selected="false">

													<span class="sui-tree-node">
														<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">assets</span>
													</span>

													<ul role="group">

														<li role="treeitem" aria-expanded="true" aria-selected="true">

															<span class="sui-tree-node">
																<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
																<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																<span aria-hidden="true"></span>
																<span class="sui-node-text">images</span>
															</span>

															<ul role="group">

																<li role="treeitem" aria-selected="true">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span data-type="jpg" aria-hidden="true"></span>
																		<span class="sui-node-text">image.jpg</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="true">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span data-type="jpg" aria-hidden="true"></span>
																		<span class="sui-node-text">image.jpg</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="true">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span data-type="jpg" aria-hidden="true"></span>
																		<span class="sui-node-text">image.jpg</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="true">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span data-type="jpg" aria-hidden="true"></span>
																		<span class="sui-node-text">image.jpg</span>
																	</span>

																</li>

															</ul>

														</li>

														<li role="treeitem" aria-expanded="false" aria-selected="false">

															<span class="sui-tree-node">
																<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
																<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																<span aria-hidden="true"></span>
																<span class="sui-node-text">css</span>
															</span>

															<ul role="group">

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">styles.min.css</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">styles.min.css</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">styles.min.css</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">styles.min.css</span>
																	</span>

																</li>

															</ul>

														</li>

														<li role="treeitem" aria-expanded="false" aria-selected="false">

															<span class="sui-tree-node">
																<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
																<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																<span aria-hidden="true"></span>
																<span class="sui-node-text">js</span>
															</span>

															<ul role="group">

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">scripts.min.js</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">scripts.min.js</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">scripts.min.js</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">scripts.min.js</span>
																	</span>

																</li>

															</ul>

														</li>

														<li role="treeitem" aria-expanded="false" aria-selected="false">

															<span class="sui-tree-node">
																<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
																<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																<span aria-hidden="true"></span>
																<span class="sui-node-text">fonts</span>
															</span>

															<ul role="group">

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">custom-font.eot</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">custom-font.svg</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">custom-font.ttf</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">custom-font.woff</span>
																	</span>

																</li>

																<li role="treeitem" aria-selected="false">

																	<span class="sui-tree-node">
																		<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
																		<span aria-hidden="true"></span>
																		<span class="sui-node-text">custom-font.woff2</span>
																	</span>

																</li>

															</ul>

														</li>

													</ul>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

											</ul>

										</li>

										<li role="treeitem" aria-expanded="false" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span aria-hidden="true"></span>
												<span class="sui-node-text">twentyseventeen</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span aria-hidden="true"></span>
														<span class="sui-node-text">file.php</span>
													</span>

												</li>

											</ul>

										</li>

									</ul>

								</li>

								<li role="treeitem" aria-expanded="false" aria-selected="false">

									<span class="sui-tree-node">
										<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">uploads</span>
									</span>

									<ul role="group">

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span aria-hidden="true"></span>
												<span class="sui-node-text">2017</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

											</ul>

										</li>

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span aria-hidden="true"></span>
												<span class="sui-node-text">2018</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

											</ul>

										</li>

										<li role="treeitem" aria-selected="false">

											<span class="sui-tree-node">
												<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
												<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
												<span aria-hidden="true"></span>
												<span class="sui-node-text">2019</span>
											</span>

											<ul role="group">

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

												<li role="treeitem" aria-selected="false">

													<span class="sui-tree-node">
														<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
														<span type="image" aria-hidden="true"></span>
														<span class="sui-node-text">image.jpg</span>
													</span>

												</li>

											</ul>

										</li>

									</ul>

								</li>

							</ul>

						</li>

						<li role="treeitem" aria-expanded="false" aria-selected="false" aria-disabled="true">

							<span class="sui-tree-node">
								<span role="button" data-button="expander" aria-label="Expand or compress item"></span>
								<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
								<span aria-hidden="true"></span>
								<span class="sui-node-text">wp-includes</span>
							</span>

							<ul role="group">

								<li role="treeitem" aria-selected="false">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">file.php</span>
									</span>

								</li>

								<li role="treeitem" aria-selected="false">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">file.php</span>
									</span>

								</li>

								<li role="treeitem" aria-selected="false">

									<span class="sui-tree-node">
										<span class="sui-node-checkbox" role="checkbox" aria-label="Select this item"></span>
										<span aria-hidden="true"></span>
										<span class="sui-node-text">file.php</span>
									</span>

								</li>

							</ul>

						</li>

					</ul>

				</div>

			</div>

		</div>

	</div>

	<!-- TREE: Fancy tree -->
	<div class="sui-box" data-tab="tree-fancy" style="display: none;">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Tree Selectors</h2>
			<span class="sui-float-left" style="margin-left: 10px;">
				<span class="sui-tag sui-tag-yellow">Fancytree JS (Supported)</span>
			</span>
		</div>

		<div class="sui-box-body">

			<div class="sui-notice sui-notice-warning">
				<p><strong>ONLY</strong> styles for fancy tree are supported. If you want to use fancy tree JS on your plugin, please read their <a href="https://github.com/mar10/fancytree/wiki#getting-started" target="_blank">documentation</a>.</p>
			</div>

			<div class="sui-notice sui-notice-info">
				<p>Click the <code>checkbox</code> to select an element, or click the <code>arrow button</code> to open/close tree sub-items.</p>
			</div>

			<p>Most common uses are bulk selections of sub-options, an a file/directory browser.</p>

			<!-- Selector -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">

					<span class="sui-settings-label">Selector</span>
					<span class="sui-description">Mostly used as a tree structure for selection which options a user wants when there are nested options.</span>
					<span class="sui-description">A good example is excluding tables from databases.</span>

				</div>

				<div class="sui-box-settings-col-2">

					<div id="sample-fancytree-selector" class="sui-tree-fancy" data-tree="selector"></div>

				</div>

			</div>

			<!-- Directory Browser -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">

					<span class="sui-settings-label">Directory Browser</span>
					<span class="sui-description">Used for browsing and selecting files and folders. Most common use case can be found in Smush’s Directory Browsing feature.</span>

				</div>

				<div class="sui-box-settings-col-2">

					<div id="sample-fancytree-directory" class="sui-tree-fancy" data-tree="directory"></div>

				</div>

			</div>

		</div>

	</div>

	<!-- TREE: Documentation -->
	<div class="sui-box" data-tab="documentation" style="display: none;">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Documentation</h2>
		</div>

		<div class="sui-box-body">

			<!-- ROW: Specifications -->
			<div
				id="showcase-specs"
				version="2.3.24"
				utilities-page="{{ site.baseurl }}/utilities/"
				monochrome="false"
				rtl-lang="false"
				single-column
			></div>

		</div>

		<hr />

		<!-- DOCS: Simple Tree -->
		<div class="sui-box-body">

			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-2">
					<span class="sui-settings-label sui-dark">Simple Tree</span>
					<span class="sui-description">Find here the basics to make SUI Tree work correctly on your installation.</span>
				</div>

			</div>

		</div>

		<div class="sui-accordion sui-accordion-flushed">

			<!-- 1. Initialize JS -->
			<div class="sui-accordion-item">

				<div class="sui-accordion-item-header">
					<div class="sui-accordion-item-title">
						1. Initialize JS
					</div>
				</div>

				<div class="sui-accordion-item-body">

					<div class="sui-box">

						<div class="sui-box-body">

							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-2">

									<span class="sui-settings-label sui-dark">Initialize JS</span>

									<span class="sui-description">1. Get latest stable Shared UI release.</span>

									<span class="sui-description">2. Load <code>shared-ui.js</code> on your plugin or <code>trees.js</code> file if you are using individual components.</span>

									<span class="sui-description">3. <code>SUI.suiTree()</code> will initialize auto-magically on load, but if this doesn't happen you can initialize it on your installation by running the following script:</span>

									<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet js hljs">
$( function() {

	// Init SUI Tree
	if ( 0 !== $( &apos;SUI_BODY_CLASS .sui-tree&apos; ).length ) {

		$( &apos;SUI_BODY_CLASS .sui-tree&apos; ).each( function() {
			SUI.suiTree( $( this ), false );
		});
	}

}( jQuery ) );
</pre>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

			<!-- 2. Markup (Selectors Tree) -->
			<div class="sui-accordion-item">

				<div class="sui-accordion-item-header">
					<div class="sui-accordion-item-title">
						2. Markup <span class="sui-tag sui-tag-yellow" style="pointer-events: none; margin-left: 10px;">Selectors Tree</span>
					</div>
				</div>

				<div class="sui-accordion-item-body">

					<div class="sui-box">

						<div class="sui-box-body">

							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-2">

									<span class="sui-settings-label sui-dark">Starter Markup</span>

									<span class="sui-description">Here you will find two different base markups that will work with Simple Tree. Click on each tab to see more details. <strong style="color: #333333;">NOTE:</strong> Please pay attention to the notes I left in the sample code.</span>

									<div class="sui-side-tabs" style="margin-top: 10px;">

										<div class="sui-tabs-menu">

											<label for="simpletree-markup-selectors--spans" class="sui-tab-item active">
												<input
													type="checkbox"
													name="simpletree-markup-selectors"
													value="spans"
													id="simpletree-markup-selectors--spans"
													data-tab-menu="simpletree-markup-selectors-tab--spans"
													checked="checked"
												/>
												Basic Mode
											</label>

											<label for="simpletree-markup-selectors--divs" class="sui-tab-item">
												<input
													type="checkbox"
													name="simpletree-markup-selectors"
													value="divs"
													id="simpletree-markup-selectors--divs"
													data-tab-menu="simpletree-markup-selectors-tab--divs"
												/>
												Complex Mode
											</label>

										</div>

										<div class="sui-tabs-content">

											<div
												class="sui-tab-content sui-tab-boxed active"
												data-tab-content="simpletree-markup-selectors-tab--spans"
											>

												<span class="sui-settings-label">Basic Mode</span>

												<span class="sui-description">This markup uses only <code>&lt;span /&gt;</code>'s inside <code>&lt;li /&gt;</code> reason why elements like checkboxes or buttons are handled with roles to make them correctly accessible for screen readers.</span>

												<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet html hljs">
&lt;ul class=&quot;sui-tree&quot; data-tree=&quot;selector&quot; role=&quot;group&quot;&gt;

	&lt;li role=&quot;treeitem&quot;&gt;

		&lt;span class=&quot;sui-tree-node&quot;&gt;

			&lt;!-- Checkbox --&gt;
			&lt;span class=&quot;sui-node-checkbox&quot; role=&quot;checkbox&quot;&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Select this item&lt;/span&gt;
			&lt;/span&gt;

			&lt;!-- Text --&gt;
			&lt;span class=&quot;sui-node-text&quot;&gt;Parent / Group&lt;/span&gt;

			&lt;!-- Button expander (for open/close) --&gt;
			&lt;span role=&quot;button&quot; data-button=&quot;expander&quot;&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Open or close this item&lt;/span&gt;
			&lt;/span&gt;

		&lt;/span&gt;

		&lt;!-- NOTE:
		Wrap more items inside UL to create a new group inside parent item
		--&gt;
		&lt;ul role=&quot;group&quot;&gt;

			&lt;li role=&quot;treeitem&quot;&gt;

				&lt;span class=&quot;sui-tree-node&quot;&gt;

					&lt;!-- Checkbox --&gt;
					&lt;span class=&quot;sui-node-checkbox&quot; role=&quot;checkbox&quot;&gt;
						&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Select this item&lt;/span&gt;
					&lt;/span&gt;

					&lt;!-- Text --&gt;
					&lt;span class=&quot;sui-node-text&quot;&gt;Child Item&lt;/span&gt;

					&lt;!-- IMPORTANT:
					Notice expander button isn't here, this because it's not necessary.
					If for any case you can't remove the expander button from the markup
					don't worry because the JS function will check if item doesn't have
					child elements and will remove the expander button.
					--&gt;

				&lt;/span&gt;

			&lt;/li&gt;

		&lt;/ul&gt;

	&lt;/li&gt;

&lt;/ul&gt;
</pre>

												</div>

												<div class="sui-notice sui-notice-warning">

													<p style="margin: 0;">If you need to get the value assigned to checkbox, that must be retrieved using JS. For example, assign <code>data-attribute=&quot;...&quot;</code> and check on change if <code>li</code> has <code>aria-selected=&quot;true&quot;</code> attribute.</p>

												</div>

											</div>

											<div
												class="sui-tab-content sui-tab-boxed"
												data-tab-content="simpletree-markup-selectors-tab--divs"
											>

												<span class="sui-settings-label">Complex Mode</span>

												<span class="sui-description">This markup uses <code>&lt;div /&gt;</code>'s and other regular markup inside <code>&lt;li /&gt;</code>.</span>

												<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet html hljs">
&lt;ul class=&quot;sui-tree&quot; data-tree=&quot;selector&quot; role=&quot;group&quot;&gt;

	&lt;li role=&quot;treeitem&quot;&gt;

		&lt;div class=&quot;sui-tree-node&quot;&gt;

			&lt;!-- Checkbox --&gt;
			&lt;label for=&quot;unique-checkbox-id&quot; class=&quot;sui-node-checkbox&quot;&gt;
				&lt;input
					type=&quot;checkbox&quot;
					id=&quot;unique-checkbox-id&quot;
				/&gt;
				&lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
				&lt;span&gt;Select this item&lt;/span&gt;
			&lt;/label&gt;

			&lt;!-- Text --&gt;
			&lt;span class=&quot;sui-node-text&quot;&gt;Parent / Group&lt;/span&gt;

			&lt;!-- Button expander (for open/close) --&gt;
			&lt;button data-button=&quot;expander&quot;&gt;
				&lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Open or close this item&lt;/span&gt;
			&lt;/button&gt;

		&lt;/div&gt;

		&lt;!-- NOTE:
		Wrap more items inside UL to create a new group inside parent item
		--&gt;
		&lt;ul role=&quot;group&quot;&gt;

			&lt;li role=&quot;treeitem&quot;&gt;

				&lt;div class=&quot;sui-tree-node&quot;&gt;

					&lt;!-- Checkbox --&gt;
					&lt;label for=&quot;unique-checkbox-id&quot; class=&quot;sui-node-checkbox&quot;&gt;
						&lt;input
							type=&quot;checkbox&quot;
							id=&quot;unique-checkbox-id&quot;
						/&gt;
						&lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
						&lt;span&gt;Select this item&lt;/span&gt;
					&lt;/label&gt;

					&lt;!-- Text --&gt;
					&lt;span class=&quot;sui-node-text&quot;&gt;Child Item&lt;/span&gt;

					&lt;!-- IMPORTANT:
					Notice expander button isn't here, this because it's not necessary.
					If for any case you can't remove the expander button from the markup
					don't worry because the JS function will check if item doesn't have
					child elements and will remove the expander button.
					--&gt;

				&lt;/div&gt;

			&lt;/li&gt;

		&lt;/ul&gt;

	&lt;/li&gt;

&lt;/ul&gt;
</pre>

												</div>

												<div class="sui-notice sui-notice-warning">

													<p style="margin: 0;">If you need to get the value assigned to checkbox, that must be retrieved using JS. For example, assign <code>data-attribute=&quot;...&quot;</code> and check on change if <code>li</code> has <code>aria-selected=&quot;true&quot;</code> attribute.</p>

												</div>

											</div>

										</div>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

			<!-- 3. Markup (Directory Browser Tree) -->
			<div class="sui-accordion-item">

				<div class="sui-accordion-item-header">
					<div class="sui-accordion-item-title">
						3. Markup <span class="sui-tag sui-tag-yellow" style="pointer-events: none; margin-left: 10px;">Directory Browser Tree</span>
					</div>
				</div>

				<div class="sui-accordion-item-body">

					<div class="sui-box">

						<div class="sui-box-body">

							<div class="sui-notice sui-notice-warning">
								<p style="margin: 0;">This markup supports <strong>complex mode</strong> markup variations mentioned on <strong>Selectors Tree</strong> markup.</p>
							</div>

							<span class="sui-settings-label sui-dark">Starter Markup</span>

							<span class="sui-description">This is the basic markup for directory browser tree and contains parent and child items. <strong style="color: #333333;">NOTE:</strong> Please pay attention to the notes I left in the sample code.</span>

							<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet html hljs">
&lt;ul class=&quot;sui-tree&quot; data-tree=&quot;directory&quot; role=&quot;group&quot;&gt;

	&lt;li role=&quot;treeitem&quot;&gt;

		&lt;span class=&quot;sui-tree-node&quot;&gt;

			&lt;!-- Button expander (for open/close) --&gt;
			&lt;span role=&quot;button&quot; data-button=&quot;expander&quot;&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Open or close this item&lt;/span&gt;
			&lt;/span&gt;

			&lt;!-- Checkbox --&gt;
			&lt;span class=&quot;sui-node-checkbox&quot; role=&quot;checkbox&quot;&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Select this item&lt;/span&gt;
			&lt;/span&gt;

			&lt;!-- Icon --&gt;
			&lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

			&lt;!-- Text --&gt;
			&lt;span class=&quot;sui-node-text&quot;&gt;Parent / Group&lt;/span&gt;

		&lt;/span&gt;

		&lt;!-- NOTE:
		Wrap more items inside UL to create a new group inside parent item
		--&gt;
		&lt;ul role=&quot;group&quot;&gt;

			&lt;li role=&quot;treeitem&quot;&gt;

				&lt;span class=&quot;sui-tree-node&quot;&gt;

					&lt;!-- IMPORTANT:
					Notice expander button isn't here, this because it's not necessary.
					If for any case you can't remove the expander button from the markup
					don't worry because the JS function will check if item doesn't have
					child elements and will remove the expander button.
					--&gt;

					&lt;!-- Checkbox --&gt;
					&lt;span class=&quot;sui-node-checkbox&quot; role=&quot;checkbox&quot;&gt;
						&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Select this item&lt;/span&gt;
					&lt;/span&gt;

					&lt;!-- Icon --&gt;
					&lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

					&lt;!-- Text --&gt;
					&lt;span class=&quot;sui-node-text&quot;&gt;Child Item&lt;/span&gt;

				&lt;/span&gt;

			&lt;/li&gt;

		&lt;/ul&gt;

	&lt;/li&gt;

&lt;/ul&gt;
</pre>

							</div>

						</div>

					</div>

				</div>

			</div>

			<!-- 4. Tricks -->
			<div class="sui-accordion-item">

				<div class="sui-accordion-item-header">
					<div class="sui-accordion-item-title">
						4. Tricks
					</div>
				</div>

				<div class="sui-accordion-item-body">

					<div class="sui-box">

						<div class="sui-box-body">

							<!-- 1. Expand Item -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">1. Expand Item</span>
									<span class="sui-description">Add <code>aria-expanded=&quot;true&quot;</code> to show parent item child elements on load.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;li role=&quot;treeitem&quot; aria-expanded=&quot;true&quot;&gt; ... &lt;/li&gt;
</pre>

									</div>

								</div>

							</div>

							<!-- 2. Select Item -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">2. Select Item</span>
									<span class="sui-description">Add <code>aria-selected=&quot;true&quot;</code> to check an item on load.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;li role=&quot;treeitem&quot; aria-selected=&quot;true&quot;&gt; ... &lt;/li&gt;
</pre>

									</div>

								</div>

							</div>

							<!-- 3. Disable Item -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">3. Disable Item</span>
									<span class="sui-description">Add <code>aria-disabled=&quot;true&quot;</code> to disable an item and its childs.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;li role=&quot;treeitem&quot; aria-disabled=&quot;true&quot;&gt; ... &lt;/li&gt;
</pre>

									</div>

								</div>

							</div>

							<!-- 4. Change Item Icon -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">4. Change Item Icon</span>
									<span class="sui-description">Add <code>data-type=&quot; ... &quot;</code> to change an item icon. Don't forget to replace <code>...</code> with the type of icon you want to use.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="sui-row">

										<div class="sui-col-md-6">

											<span class="sui-settings-label">Basic Icons</span>

											<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;!-- TYPE: Page (Default icon for simple items) --&gt;
&lt;span data-type=&quot;page&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Folder (Default icon for parent items) --&gt;
&lt;span data-type=&quot;folder&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: PDF --&gt;
&lt;span data-type=&quot;pdf&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: ZIP --&gt;
&lt;span data-type=&quot;zip&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Image --&gt;
&lt;span data-type=&quot;image&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Padlock (locked) --&gt;
&lt;span data-type=&quot;lock&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
</pre>

											</div>

										</div>

										<div class="sui-col-md-6">

											<span class="sui-settings-label">Logo Icons</span>

											<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;!-- TYPE: WPMU DEV Logo --&gt;
&lt;span data-type=&quot;wpmudev&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Defender Logo --&gt;
&lt;span data-type=&quot;defender&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Smush Logo --&gt;
&lt;span data-type=&quot;smush&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Hummingbird Logo --&gt;
&lt;span data-type=&quot;hummingbird&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Uptime Logo --&gt;
&lt;span data-type=&quot;uptime&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Smartcrawl Logo --&gt;
&lt;span data-type=&quot;smartcrawl&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Forminator Logo --&gt;
&lt;span data-type=&quot;forminator&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Shipper Logo --&gt;
&lt;span data-type=&quot;shipper&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Snapshot Logo --&gt;
&lt;span data-type=&quot;snapshot&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Hustle Logo --&gt;
&lt;span data-type=&quot;hustle&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;

&lt;!-- TYPE: Performance Logo --&gt;
&lt;span data-type=&quot;performance&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
</pre>

											</div>

										</div>

									</div>

								</div>

							</div>

							<!-- 5. Simple Form -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">5. Simple Form</span>
									<span class="sui-description">On <strong style="color: #FF6D6D;">Directory Browser Tree</strong> you can allow a parent item to add a new child item through a simple form.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="sui-notice sui-notice-warning">
										<p style="margin: 0 0 5px;">Enable show/hide animation for the simple form by editing the tree function like this: <code>SUI.suiTree( $( this ), true );</code></p>
										<p style="margin: 0;"><strong>NOTE:</strong> This comes enabled by default from SUI but in case is not change above on the function might help you.</p>
									</div>

									<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;ul class=&quot;sui-tree&quot; data-tree=&quot;directory&quot; role=&quot;group&quot;&gt;

	&lt;li role=&quot;treeitem&quot;&gt;

		&lt;span class=&quot;sui-tree-node&quot;&gt;
			&lt;span role=&quot;button&quot; data-button=&quot;expander&quot;&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Open or close this item&lt;/span&gt;
			&lt;/span&gt;
			&lt;span class=&quot;sui-node-checkbox&quot; role=&quot;checkbox&quot;&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Select this item&lt;/span&gt;
			&lt;/span&gt;
			&lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
			&lt;span class=&quot;sui-node-text&quot;&gt;Parent / Group&lt;/span&gt;
			&lt;span role=&quot;button&quot; data-button=&quot;add&quot;&gt;
				&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Add new folder&lt;/span&gt;
			&lt;/span&gt;
		&lt;/span&gt;

		&lt;ul role=&quot;group&quot;&gt;

			&lt;span role=&quot;contentinfo&quot;&gt;

				&lt;span id=&quot;label-unique-id&quot; class=&quot;sui-screen-reader-text&quot;&gt;Folder name&lt;/span&gt;

				&lt;span role=&quot;form&quot;&gt;

					&lt;input
						type=&quot;text&quot;
						value=&quot;&quot;
						placeholder=&quotNew folder name;&quot;
						id=&quot;unique-id&quot;
						aria-labelledby=&quot;label-unique-id&quot;
					/&gt;

					&lt;span role=&quot;button&quot;&gt;
						&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Add Folder&lt;/span&gt;
					&lt;/span&gt;

				&lt;/span&gt;

				&lt;span role=&quot;button&quot; data-button=&quot;remove&quot;&gt;
					&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Remove Folder&lt;/span&gt;
				&lt;/span&gt;

			&lt;/span&gt;

			&lt;!-- Already existing item --&gt;
			&lt;li role=&quot;treeitem&quot;&gt;

				&lt;span class=&quot;sui-tree-node&quot;&gt;
					&lt;span class=&quot;sui-node-checkbox&quot; role=&quot;checkbox&quot;&gt;
						&lt;span class=&quot;sui-screen-reader-text&quot;&gt;Select this item&lt;/span&gt;
					&lt;/span&gt;
					&lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
					&lt;span class=&quot;sui-node-text&quot;&gt;Child Item&lt;/span&gt;
				&lt;/span&gt;

			&lt;/li&gt;

		&lt;/ul&gt;

	&lt;/li&gt;

&lt;/ul&gt;
</pre>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</div>

		<!-- DOCS: Fancy Tree -->
		<div class="sui-box-body">

			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-2">
					<span class="sui-settings-label sui-dark">Fancy Tree</span>
					<span class="sui-description">Find here the basics to make Fancy Tree JS with SUI styles work in your plugin.</span>
				</div>

			</div>

		</div>

		<div class="sui-accordion sui-accordion-flushed">

			<!-- 1. Installation -->
			<div class="sui-accordion-item">

				<div class="sui-accordion-item-header">
					<div class="sui-accordion-item-title">
						1. Installation
					</div>
				</div>

				<div class="sui-accordion-item-body">

					<div class="sui-box">

						<div class="sui-box-body">

							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-2">

									<span class="sui-settings-label sui-dark">Installation</span>

									<span class="sui-description"><strong>1.</strong> Get latest Fancytree JS. Read their <a href="https://github.com/mar10/fancytree/wiki#getting-started" target="_blank">Wiki</a> for correct steps.</span>

									<span class="sui-description"><strong>2.</strong> Init Fancytree JS on your plugin:</span>

									<div class="demo-code-block" style="margin: 10px 0;">

<pre class="sui-code-snippet js hljs">
$( function() {

	// Init fancy tree
	$( &apos;#tree-id&apos; ).fancytree({
		// Put here all your settings
	});

}( jQuery ) );
</pre>

									</div>

									<div class="sui-notice sui-notice-warning" style="margin-top: 10px;">
										<p style="margin: 0;">In the showcase we use <a href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/jquery.fancytree-all-deps.js" target="_blank">Fancytree JS 2.27.0</a> because latest available version <strong style="color: #FF7E41;">2.30.2</strong> has an annoying bug that makes page scroll up or down when you click on an item.</p>
									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

			<!-- 2. Markup -->
			<div class="sui-accordion-item">

				<div class="sui-accordion-item-header">
					<div class="sui-accordion-item-title">
						2. Markup
					</div>
				</div>

				<div class="sui-accordion-item-body">

					<div class="sui-box">

						<div class="sui-box-body">

							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-2">

									<span class="sui-settings-label sui-dark">Markup <span class="sui-tag sui-tag-yellow">Selector</span></span>

									<span class="sui-description">Notice the <strong>class</strong> and <strong>attribute</strong> to load the correct styles for your tree.</span>

									<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;div
	id=&quot;tree-id&quot;
	class=&quot;sui-tree-fancy&quot;
	data-tree=&quot;selector&quot;
&gt;&lt;/div&gt;
</pre>

									</div>

								</div>

							</div>

							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-2">

									<span class="sui-settings-label sui-dark">Markup <span class="sui-tag sui-tag-yellow">Directory Browser</span></span>
									<span class="sui-description">Notice the <strong>class</strong> and <strong>attribute</strong> to load the correct styles for your tree.</span>

									<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet sui-no-copy html">
&lt;div
	id=&quot;tree-id&quot;
	class=&quot;sui-tree-fancy&quot;
	data-tree=&quot;directory&quot;
&gt;&lt;/div&gt;
</pre>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

			<!-- 3. Tricks -->
			<div class="sui-accordion-item">

				<div class="sui-accordion-item-header">
					<div class="sui-accordion-item-title">
						3. Tricks <span class="sui-tag sui-tag-yellow" style="pointer-events: none; margin-left: 10px;">Fancytree JS</span>
					</div>
				</div>

				<div class="sui-accordion-item-body">

					<div class="sui-box">

						<div class="sui-box-body">

							<!-- 1. Enable / Disable Checkbox -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">1. Enable / Disable Checkbox</span>
									<span class="sui-description">You can do this globally (for all checkboxes on tree) or per item.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="sui-form-field">

										<div class="demo-code-block">

<pre class="sui-code-snippet js hljs">
$( function() {

	$( &apos;#tree-id&apos; ).fancytree({

		// (Bool) global checkbox
		checkbox: false,

		// (Bool) Checkbox per item
		source: [
			{ title: 'Item', checkbox: true }
		],
	});

}( jQuery ) );
</pre>

										</div>

									</div>

								</div>

							</div>

							<!-- 2. Expand Item -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">2. Expand Item</span>
									<span class="sui-description">Some times you need an item expanded and show its child items as soon as tree loads.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="sui-form-field">

										<div class="demo-code-block">

<pre class="sui-code-snippet js hljs">
$( function() {

	$( &apos;#tree-id&apos; ).fancytree({

		source: [
			{
				title: 'Item',
				expanded: true, // Expand item on load
				child: [ { title: 'Child Item' } ] // IMPORTANT: For expand to work correctly make sure you have child items
			}
		],
	});

}( jQuery ) );
</pre>

										</div>

									</div>

								</div>

							</div>

							<!-- 3. Custom Icon -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">3. Custom Icon</span>
									<span class="sui-description">When you use <strong style="color: #FF7E41;">Directory Browser</strong> tree mode, notice each item have an icon (can be a folder or a page). To change the item icon follow this code example.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="sui-form-field">

										<div class="demo-code-block">

<pre class="sui-code-snippet js hljs">
$( function() {

	$( &apos;#tree-id&apos; ).fancytree({

		// Replace icon per item
		source: [
			{
				title: 'Item',
				icon: 'sui-icon-photo-picture' // Replace this with any SUI icon class
			}
		],

		// Replace folder icon (globally)
		icon: function( event, data ) {

			if ( data.node.isFolder() ) {
				return 'sui-icon-folder'; // Replace this with any SUI icon class.
			}
		},
	});

}( jQuery ) );
</pre>

										</div>

									</div>

								</div>

							</div>

							<!-- 4. Remove Icons -->
							<div class="sui-box-settings-row">

								<div class="sui-box-settings-col-1">

									<span class="sui-settings-label">4. Remove Icons</span>
									<span class="sui-description">When you use <strong style="color: #FF7E41;">Selectors</strong> tree mode, notice items don't have an icon. By default Fancytree JS enables these icons, you need to remove them to make it match the design.</span>

								</div>

								<div class="sui-box-settings-col-2">

									<div class="sui-form-field">

										<div class="demo-code-block">

<pre class="sui-code-snippet js hljs">
$( function() {

	$( &apos;#tree-id&apos; ).fancytree({

		// Remove icons (globally)
		icon: false,

	});

}( jQuery ) );
</pre>

										</div>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</div>

	</div>

</section>