TreeView

View in LexiconBeta

A tree view is a component based on nodes that are shown in a hierarchical structure.

install	yarn add @clayui/core
version
use	import {TreeView} from '@clayui/core';

Treeview

The treeview provides a way to display information in a hierarchical structure by using collapsible items (nodes). You can navigate between these items using either your mouse device or keyboard. The most common example of a treeview is a folder structure for file systems, but it can be used for showing any hierarchical relationships.

• Liferay Drive
  • Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
    • Details
    • Categorization
    • Documents and Media
    • Site Template
• Repositories
  • Sitemap
  • Robots
• Documents and Media
  • Default User Associations
  • Staging
  • Analytics
  • Maps

<ul className="treeview treeview-light treeview-nested" role="tree">
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewCollapse01"
			aria-expanded="true"
			className="treeview-link"
			data-target="#treeviewCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="0"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="treeviewCollapse01"
							aria-expanded="true"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewCollapse01"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								title="Liferay Drive"
								><span className="text-truncate"
									>Liferay Drive</span
								></span
							>
						</span>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse show" id="treeviewCollapse01">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						aria-controls="treeviewCollapse02"
						aria-expanded="false"
						className="collapsed treeview-link"
						data-target="#treeviewCollapse02"
						data-toggle="collapse"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span className="autofit-col">
									<button
										aria-controls="treeviewCollapse02"
										aria-expanded="false"
										className="btn btn-monospaced component-expander"
										data-target="#treeviewCollapse02"
										data-toggle="collapse"
										tabIndex="-1"
										type="button"
									>
										<span className="c-inner" tabIndex="-2">
											<svg
												className="lexicon-icon lexicon-icon-angle-down"
												focusable="false"
												role="presentation"
											>
												<use
													xlinkHref="/images/icons/icons.svg#angle-down"
												/>
											</svg>
											<svg
												className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
												focusable="false"
												role="presentation"
											>
												<use
													xlinkHref="/images/icons/icons.svg#angle-right"
												/>
											</svg>
										</span>
									</button>
								</span>
								<span className="autofit-col">
									<span className="component-icon">
										<svg
											className="lexicon-icon lexicon-icon-folder"
											focusable="false"
											role="presentation"
										>
											<use
												xlinkHref="/images/icons/icons.svg#folder"
											/>
										</svg>
									</span>
								</span>
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text">
										<span
											className="text-truncate-inline"
											title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)"
											><span className="text-truncate"
												>Liferay Drive
												(ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span
											></span
										>
									</span>
								</span>
							</span>
						</span>
					</div>
					<div className="collapse" id="treeviewCollapse02">
						<ul className="treeview-group" role="group">
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														title="Details"
														><span
															className="text-truncate"
															>Details</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														title="Categorization"
														><span
															className="text-truncate"
															>Categorization</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														title="Documents and Media"
														><span
															className="text-truncate"
															>Documents and
															Media</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														title="Site Template"
														><span
															className="text-truncate"
															>Site Template</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</li>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewCollapse03"
			aria-expanded="false"
			className="collapsed treeview-link"
			data-target="#treeviewCollapse03"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="-1"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="treeviewCollapse03"
							aria-expanded="false"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewCollapse03"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								title="Repositories"
								><span className="text-truncate"
									>Repositories</span
								></span
							>
						</span>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse" id="treeviewCollapse03">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											title="Site Map"
											><span className="text-truncate"
												>Sitemap</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											title="Robots"
											><span className="text-truncate"
												>Robots</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
			</ul>
		</div>
	</li>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewCollapse04"
			aria-expanded="false"
			className="collapsed treeview-link"
			data-target="#treeviewCollapse04"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="-1"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="treeviewCollapse04"
							aria-expanded="false"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewCollapse04"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								title="Documents and Media"
								><span className="text-truncate"
									>Documents and Media</span
								></span
							>
						</span>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse" id="treeviewCollapse04">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											title="Default User Associations"
											><span className="text-truncate"
												>Default User Associations</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											title="Staging"
											><span className="text-truncate"
												>Staging</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											title="Analytics"
											><span className="text-truncate"
												>Analytics</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											title="Maps"
											><span className="text-truncate"
												>Maps</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
			</ul>
		</div>
	</li>
</ul>

Treeview Group

The class treeview-group must be applied to all nested ul elements inside treeview. This class helps provide the proper spacing for nested treeview-links.

<ul className="treeview treeview-light treeview-nested" role="tree">
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewExpanderCollapse01"
			aria-expanded="false"
			className="treeview-link"
			data-target="#treeviewExpanderCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="0"
		>
			...
		</div>
		<div className="collapse" id="treeviewExpanderCollapse01">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
							><span className="component-text"
								>Tree Item</span
							></span
						>
					</div>
				</li>
			</ul>
		</div>
	</li>
</ul>

Treeview Item

The class treeview-item must be applied to all li elements. This class helps provide the proper spacing for nested treeview-links.

<ul className="treeview treeview-light treeview-nested" role="tree">
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewExpanderCollapse01"
			aria-expanded="false"
			className="treeview-link"
			data-target="#treeviewExpanderCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabindex="0"
		>
			...
		</div>
	</li>
</ul>

Treeview Link

This is the container for all nodes inside treeview. If there are auxiliary controls inside the treeview-link (e.g., a or button) it is recommended to use a div element with the tabIndex attribute.

<ul className="treeview treeview-light treeview-nested" role="tree">
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewExpanderCollapse01"
			aria-expanded="false"
			className="treeview-link"
			data-target="#treeviewExpanderCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabindex="0"
		>
			...
		</div>
	</li>
</ul>

Treeview Link Disabled

The modifier class disabled adds disabled styles to treeview-link. The class does not add disabled styles to form elements, links, or buttons inside. Those must be disabled individually.

<ul className="treeview treeview-light treeview-nested" role="tree">
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewItemDisabledCollapse02"
			aria-expanded="true"
			className="treeview-link disabled hover"
			data-target="#treeviewItemDisabledCollapse02"
			data-toggle="collapse"
			role="treeitem"
			tabindex="-1"
		>
			...
		</div>
	</li>
</ul>

<div className="bg-dark">
	<ul className="treeview treeview-dark treeview-nested" role="tree">
		<li className="treeview-item" role="none">
			<div
				aria-controls="treeviewItemDisabledDarkCollapse01"
				aria-expanded="true"
				className="treeview-link disabled hover"
				data-target="#treeviewItemDisabledDarkCollapse01"
				data-toggle="collapse"
				role="treeitem"
				tabindex="-1"
			>
				...
			</div>
		</li>
	</ul>
</div>

Component Expander

The expander is used to expand or collapse the nodes and serves as an indicator for those states. The class component-expander marks the button as the toggle. The class component-expanded-d-none on lexicon-icon hides the icon when tree node is expanded.

• Liferay Drive
  • Tree Item

<button
	aria-controls="treeviewExpanderCollapse01"
	aria-expanded="false"
	className="btn btn-monospaced component-expander"
	data-target="#treeviewExpanderCollapse01"
	data-toggle="collapse"
	tabindex="-1"
	type="button"
>
	<span className="c-inner" tabIndex="-2">
		<svg
			className="lexicon-icon lexicon-icon-angle-down"
			focusable="false"
			role="presentation"
		>
			<use xlinkHref="/images/icons/icons.svg#angle-down" />
		</svg>
		<svg
			className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
			focusable="false"
			role="presentation"
		>
			<use xlinkHref="/images/icons/icons.svg#angle-right" />
		</svg>
	</span>
</button>

Component Action

The action button(s) are monospaced buttons used to supply additional features to a tree node, such as removal or a dropdown.

• Liferay Drive
  • Tree Item

<button
	className="btn btn-monospaced component-action"
	tabindex="-1"
	type="button"
>
	<span className="c-inner" tabIndex="-2">
		<svg
			className="lexicon-icon lexicon-icon-ellipsis-v"
			focusable="false"
			role="presentation"
		>
			<use xlinkHref="/images/icons/icons.svg#ellipsis-v" />
		</svg>
	</span>
</button>

Treeview Dragging

The modifier class treeview-dragging displays an indicator showing the item being dragged.

Treeview Dropping Bottom

The modifier class treeview-dropping-bottom adds a visual indicator to the bottom of treeview-link to show where a dragged treeview-link will be inserted.

• Liferay Drive
  • Tree Item

<ul
	className="treeview treeview-light treeview-nested show-quick-actions-on-hover"
	role="tree"
>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewDroppoingBottomCollapse01"
			aria-expanded="true"
			className="treeview-dropping-bottom treeview-link"
			data-target="#treeviewDroppoingBottomCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="0"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="treeviewDroppoingBottomCollapse01"
							aria-expanded="true"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewDroppoingBottomCollapse01"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								title="Liferay Drive"
								><span className="text-truncate"
									>Liferay Drive</span
								></span
							>
						</span>
					</span>
					<span className="autofit-col">
						<button
							className="btn btn-monospaced component-action quick-action-item"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-times-circle-full"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#times-circle-full"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<button
							className="btn btn-monospaced component-action quick-action-item"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-ellipsis-v"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#ellipsis-v"
									/>
								</svg>
							</span>
						</button>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse show" id="treeviewDroppoingBottomCollapse01">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
							><span className="component-text"
								>Tree Item</span
							></span
						>
					</div>
				</li>
			</ul>
		</div>
	</li>
</ul>

Treeview Dropping Top

The modifier class treeview-dropping-top adds a visual indicator to the bottom of treeview-link to show where a dragged treeview-link will be inserted.

• Liferay Drive
  • Tree Item

<ul
	className="treeview treeview-light treeview-nested show-quick-actions-on-hover"
	role="tree"
>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewDroppingTopCollapse01"
			aria-expanded="true"
			className="treeview-dropping-top treeview-link"
			data-target="#treeviewDroppingTopCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="0"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="treeviewDroppingTopCollapse01"
							aria-expanded="true"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewDroppingTopCollapse01"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								title="Liferay Drive"
								><span className="text-truncate"
									>Liferay Drive</span
								></span
							>
						</span>
					</span>
					<span className="autofit-col">
						<button
							className="btn btn-monospaced component-action quick-action-item"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-times-circle-full"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#times-circle-full"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<button
							className="btn btn-monospaced component-action quick-action-item"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-ellipsis-v"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#ellipsis-v"
									/>
								</svg>
							</span>
						</button>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse show" id="treeviewDroppingTopCollapse01">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
							><span className="component-text"
								>Tree Item</span
							></span
						>
					</div>
				</li>
			</ul>
		</div>
	</li>
</ul>

Treeview Dropping Middle

The modifier class treeview-dropping-middle adds a visual indicator around the treeview-link to show where a dragged treeview-link will be nested.

• Liferay Drive
  • Tree Item

<ul
	className="treeview treeview-light treeview-nested show-quick-actions-on-hover"
	role="tree"
>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewDroppingMiddleCollapse01"
			aria-expanded="true"
			className="treeview-dropping-middle treeview-link"
			data-target="#treeviewDroppingMiddleCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="0"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="treeviewDroppingMiddleCollapse01"
							aria-expanded="true"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewDroppingMiddleCollapse01"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								title="Liferay Drive"
								><span className="text-truncate"
									>Liferay Drive</span
								></span
							>
						</span>
					</span>
					<span className="autofit-col">
						<button
							className="btn btn-monospaced component-action quick-action-item"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-times-circle-full"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#times-circle-full"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<button
							className="btn btn-monospaced component-action quick-action-item"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-ellipsis-v"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#ellipsis-v"
									/>
								</svg>
							</span>
						</button>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse show" id="treeviewDroppingMiddleCollapse01">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
							><span className="component-text"
								>Tree Item</span
							></span
						>
					</div>
				</li>
			</ul>
		</div>
	</li>
</ul>

Variations

Show Component Expander on Hover

The class show-component-expander-on-hover displays the component-expander when the mouse hovers over the treeview component.

• Liferay Drive
  • Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
    • Details
    • Categorization
    • Documents and Media
    • Site Template
• Repositories
  • Sitemap
  • Robots
• Documents and Media
  • Default User Associations
  • Staging
  • Analytics
  • Maps

<ul
	className="show-component-expander-on-hover treeview treeview-nested treeview-light"
	role="tree"
>
	<li className="treeview-item" role="none">
		<div
			aria-controls="showComponentExpanderCollapse01"
			aria-expanded="true"
			className="treeview-link"
			data-target="#showComponentExpanderCollapse01"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="0"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="showComponentExpanderCollapse01"
							aria-expanded="true"
							className="btn btn-monospaced component-expander show"
							data-target="#showComponentExpanderCollapse01"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								data-toggle="tooltip"
								title="Liferay Drive"
								><span className="text-truncate"
									>Liferay Drive</span
								></span
							>
						</span>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse show" id="showComponentExpanderCollapse01">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						aria-controls="showComponentExpanderCollapse02"
						aria-expanded="false"
						className="collapsed treeview-link"
						data-target="#showComponentExpanderCollapse02"
						data-toggle="collapse"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span className="autofit-col">
									<button
										aria-controls="showComponentExpanderCollapse02"
										aria-expanded="false"
										className="btn btn-monospaced component-expander"
										data-target="#showComponentExpanderCollapse02"
										data-toggle="collapse"
										tabIndex="-1"
										type="button"
									>
										<span className="c-inner" tabIndex="-2">
											<svg
												className="lexicon-icon lexicon-icon-angle-down"
												focusable="false"
												role="presentation"
											>
												<use
													xlinkHref="/images/icons/icons.svg#angle-down"
												/>
											</svg>
											<svg
												className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
												focusable="false"
												role="presentation"
											>
												<use
													xlinkHref="/images/icons/icons.svg#angle-right"
												/>
											</svg>
										</span>
									</button>
								</span>
								<span className="autofit-col">
									<span className="component-icon">
										<svg
											className="lexicon-icon lexicon-icon-folder"
											focusable="false"
											role="presentation"
										>
											<use
												xlinkHref="/images/icons/icons.svg#folder"
											/>
										</svg>
									</span>
								</span>
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text">
										<span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)"
											><span className="text-truncate"
												>Liferay Drive
												(ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span
											></span
										>
									</span>
								</span>
							</span>
						</span>
					</div>
					<div
						className="collapse"
						id="showComponentExpanderCollapse02"
					>
						<ul className="treeview-group" role="group">
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														><span
															className="text-truncate"
															data-toggle="tooltip"
															title="Details"
															>Details</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														data-toggle="tooltip"
														title="Categorization"
														><span
															className="text-truncate"
															>Categorization</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														data-toggle="tooltip"
														title="Documents and Media"
														><span
															className="text-truncate"
															>Documents and
															Media</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<span
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														data-toggle="tooltip"
														title="Site Template"
														><span
															className="text-truncate"
															>Site Template</span
														></span
													></span
												>
											</span>
										</span>
									</span>
								</div>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</li>
	<li className="treeview-item" role="none">
		<div
			aria-controls="showComponentExpanderCollapse03"
			aria-expanded="false"
			className="collapsed treeview-link"
			data-target="#showComponentExpanderCollapse03"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="-1"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="showComponentExpanderCollapse03"
							aria-expanded="false"
							className="btn btn-monospaced component-expander"
							data-target="#showComponentExpanderCollapse03"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								data-toggle="tooltip"
								title="Repositories"
								><span className="text-truncate"
									>Repositories</span
								></span
							>
						</span>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse" id="showComponentExpanderCollapse03">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Sitemap"
											><span className="text-truncate"
												>Sitemap</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Robots"
											><span className="text-truncate"
												>Robots</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
			</ul>
		</div>
	</li>
	<li className="treeview-item" role="none">
		<div
			aria-controls="showComponentExpanderCollapse04"
			aria-expanded="false"
			className="collapsed treeview-link"
			data-target="#showComponentExpanderCollapse04"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="-1"
		>
			<span className="c-inner" tabIndex="-2">
				<span className="autofit-row">
					<span className="autofit-col">
						<button
							aria-controls="showComponentExpanderCollapse04"
							aria-expanded="false"
							className="btn btn-monospaced component-expander"
							data-target="#showComponentExpanderCollapse04"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</span>
					<span className="autofit-col">
						<span className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</span>
					</span>
					<span className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span
								className="text-truncate-inline"
								data-toggle="tooltip"
								title="Documents and Media"
								><span className="text-truncate"
									>Documents and Media</span
								></span
							>
						</span>
					</span>
				</span>
			</span>
		</div>
		<div className="collapse" id="showComponentExpanderCollapse04">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Default User Associations"
											><span className="text-truncate"
												>Default User Associations</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Staging"
											><span className="text-truncate"
												>Staging</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Analytics"
											><span className="text-truncate"
												>Analytics</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<span
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-expand"
								>
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Maps"
											><span className="text-truncate"
												>Maps</span
											></span
										></span
									>
								</span>
							</span>
						</span>
					</div>
				</li>
			</ul>
		</div>
	</li>
</ul>

Show Quick Actions on Hover

The class show-quick-actions-on-hover on treeview will hide all quick-action-item’s except when treeview-link is hovered or focused.

• Liferay DriveCheck child nodes
  • Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)Check child nodes
    • Details
    • Categorization
    • Documents and Media
    • Site Template
• RepositoriesCheck child nodes
  • Sitemap
  • Robots
• Documents and MediaCheck child nodes
  • Default User Associations
  • Staging
  • Analytics
  • Maps

<ul
	className="treeview treeview-nested treeview-light show-quick-actions-on-hover"
	role="tree"
>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewCollapseCheckboxHoverBtn01"
			aria-expanded="true"
			className="treeview-link show"
			data-target="#treeviewCollapseCheckboxHoverBtn01"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="0"
		>
			<div className="c-inner" tabIndex="-2">
				<div className="autofit-row">
					<div className="autofit-col">
						<button
							aria-controls="treeviewCollapseCheckboxHoverBtn01"
							aria-expanded="true"
							className="btn btn-monospaced component-expander show"
							data-target="#treeviewCollapseCheckboxHoverBtn01"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</div>
					<div className="autofit-col">
						<div className="custom-control custom-checkbox">
							<label>
								<input
									className="custom-control-input"
									tabIndex="-1"
									type="checkbox"
								/>
								<span className="custom-control-label"></span>
							</label>
						</div>
					</div>
					<div className="autofit-col">
						<div className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</div>
					</div>
					<div className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-shrink"
								>
									<span
										className="text-truncate-inline"
										title="Liferay Drive"
										><span className="text-truncate"
											>Liferay Drive</span
										></span
									>
								</span>
								<span className="autofit-col">
									<button
										className="btn btn-secondary quick-action-item ml-4"
										tabIndex="-1"
										type="button"
									>
										<span className="c-inner" tabIndex="-2"
											>Check child nodes</span
										>
									</button>
								</span>
							</span>
						</span>
					</div>
				</div>
			</div>
		</div>
		<div className="collapse show" id="treeviewCollapseCheckboxHoverBtn01">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						aria-controls="treeviewCollapseCheckboxHoverBtn02"
						aria-expanded="false"
						className="collapsed treeview-link"
						data-target="#treeviewCollapseCheckboxHoverBtn02"
						data-toggle="collapse"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<div
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<div className="autofit-row">
								<div className="autofit-col">
									<button
										aria-controls="treeviewCollapseCheckboxHoverBtn02"
										aria-expanded="false"
										className="btn btn-monospaced component-expander"
										data-target="#treeviewCollapseCheckboxHoverBtn02"
										data-toggle="collapse"
										tabIndex="-1"
										type="button"
									>
										<span className="c-inner" tabIndex="-2">
											<svg
												className="lexicon-icon lexicon-icon-angle-down"
												focusable="false"
												role="presentation"
											>
												<use
													xlinkHref="/images/icons/icons.svg#angle-down"
												/>
											</svg>
											<svg
												className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
												focusable="false"
												role="presentation"
											>
												<use
													xlinkHref="/images/icons/icons.svg#angle-right"
												/>
											</svg>
										</span>
									</button>
								</div>
								<div className="autofit-col">
									<div
										className="custom-control custom-checkbox"
									>
										<label>
											<input
												className="custom-control-input"
												tabIndex="-1"
												type="checkbox"
											/>
											<span
												className="custom-control-label"
											></span>
										</label>
									</div>
								</div>
								<div className="autofit-col">
									<div className="component-icon">
										<svg
											className="lexicon-icon lexicon-icon-folder"
											focusable="false"
											role="presentation"
										>
											<use
												xlinkHref="/images/icons/icons.svg#folder"
											/>
										</svg>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<span className="component-text">
										<span className="autofit-row">
											<span
												className="autofit-col autofit-col-shrink"
											>
												<span
													className="text-truncate-inline"
													title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)"
													><span
														className="text-truncate"
														>Liferay Drive
														(ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span
													></span
												>
											</span>
											<span className="autofit-col">
												<button
													className="btn btn-secondary quick-action-item ml-4"
													tabIndex="-1"
													type="button"
												>
													<span
														className="c-inner"
														tabIndex="-2"
														>Check child nodes</span
													>
												</button>
											</span>
										</span>
									</span>
								</div>
							</div>
						</div>
					</div>
					<div
						className="collapse"
						id="treeviewCollapseCheckboxHoverBtn02"
					>
						<ul className="treeview-group" role="group">
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<div
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<div className="autofit-row">
											<div className="autofit-col">
												<div
													className="custom-control custom-checkbox"
												>
													<label>
														<input
															className="custom-control-input"
															tabIndex="-1"
															type="checkbox"
														/>
														<span
															className="custom-control-label"
														></span>
													</label>
												</div>
											</div>
											<div
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														><span
															className="text-truncate"
															title="Details"
															>Details</span
														></span
													></span
												>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<div
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<div className="autofit-row">
											<div className="autofit-col">
												<div
													className="custom-control custom-checkbox"
												>
													<label>
														<input
															className="custom-control-input"
															tabIndex="-1"
															type="checkbox"
														/>
														<span
															className="custom-control-label"
														></span>
													</label>
												</div>
											</div>
											<div
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														title="Categorization"
														><span
															className="text-truncate"
															>Categorization</span
														></span
													></span
												>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<div
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<div className="autofit-row">
											<div className="autofit-col">
												<div
													className="custom-control custom-checkbox"
												>
													<label>
														<input
															className="custom-control-input"
															tabIndex="-1"
															type="checkbox"
														/>
														<span
															className="custom-control-label"
														></span>
													</label>
												</div>
											</div>
											<div
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														title="Documents and Media"
														><span
															className="text-truncate"
															>Documents and
															Media</span
														></span
													></span
												>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li className="treeview-item" role="none">
								<div
									className="treeview-link"
									role="treeitem"
									tabIndex="-1"
									style={{paddingLeft: '48px'}}
								>
									<div
										className="c-inner"
										tabIndex="-2"
										style={{marginLeft: '-48px'}}
									>
										<div className="autofit-row">
											<div className="autofit-col">
												<div
													className="custom-control custom-checkbox"
												>
													<label>
														<input
															className="custom-control-input"
															tabIndex="-1"
															type="checkbox"
														/>
														<span
															className="custom-control-label"
														></span>
													</label>
												</div>
											</div>
											<div
												className="autofit-col autofit-col-expand"
											>
												<span className="component-text"
													><span
														className="text-truncate-inline"
														title="Site Template"
														><span
															className="text-truncate"
															>Site Template</span
														></span
													></span
												>
											</div>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</li>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewCollapseCheckboxHoverBtn03"
			aria-expanded="false"
			className="collapsed treeview-link"
			data-target="#treeviewCollapseCheckboxHoverBtn03"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="-1"
		>
			<div className="c-inner" tabIndex="-2">
				<div className="autofit-row">
					<div className="autofit-col">
						<button
							aria-controls="treeviewCollapseCheckboxHoverBtn03"
							aria-expanded="false"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewCollapseCheckboxHoverBtn03"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</div>
					<div className="autofit-col">
						<div className="custom-control custom-checkbox">
							<label>
								<input
									className="custom-control-input"
									tabIndex="-1"
									type="checkbox"
								/>
								<span className="custom-control-label"></span>
							</label>
						</div>
					</div>
					<div className="autofit-col">
						<div className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</div>
					</div>
					<div className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-shrink"
								>
									<span
										className="text-truncate-inline"
										data-toggle="tooltip"
										title="Repositories"
										><span className="text-truncate"
											>Repositories</span
										></span
									>
								</span>
								<span className="autofit-col">
									<button
										className="btn btn-secondary quick-action-item ml-4"
										tabIndex="-1"
										type="button"
									>
										<span className="c-inner" tabIndex="-2"
											>Check child nodes</span
										>
									</button>
								</span>
							</span>
						</span>
					</div>
				</div>
			</div>
		</div>
		<div className="collapse" id="treeviewCollapseCheckboxHoverBtn03">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<div
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<div className="autofit-row">
								<div className="autofit-col">
									<div
										className="custom-control custom-checkbox"
									>
										<label>
											<input
												className="custom-control-input"
												tabIndex="-1"
												type="checkbox"
											/>
											<span
												className="custom-control-label"
											></span>
										</label>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Sitemap"
											><span className="text-truncate"
												>Sitemap</span
											></span
										></span
									>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<div
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<div className="autofit-row">
								<div className="autofit-col">
									<div
										className="custom-control custom-checkbox"
									>
										<label>
											<input
												className="custom-control-input"
												tabIndex="-1"
												type="checkbox"
											/>
											<span
												className="custom-control-label"
											></span>
										</label>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Robots"
											><span className="text-truncate"
												>Robots</span
											></span
										></span
									>
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</li>
	<li className="treeview-item" role="none">
		<div
			aria-controls="treeviewCollapseCheckboxHoverBtn04"
			aria-expanded="false"
			className="collapsed treeview-link"
			data-target="#treeviewCollapseCheckboxHoverBtn04"
			data-toggle="collapse"
			role="treeitem"
			tabIndex="-1"
		>
			<div className="c-inner" tabIndex="-2">
				<div className="autofit-row">
					<div className="autofit-col">
						<button
							aria-controls="treeviewCollapseCheckboxHoverBtn04"
							aria-expanded="false"
							className="btn btn-monospaced component-expander"
							data-target="#treeviewCollapseCheckboxHoverBtn04"
							data-toggle="collapse"
							tabIndex="-1"
							type="button"
						>
							<span className="c-inner" tabIndex="-2">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-down"
									/>
								</svg>
								<svg
									className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none"
									focusable="false"
									role="presentation"
								>
									<use
										xlinkHref="/images/icons/icons.svg#angle-right"
									/>
								</svg>
							</span>
						</button>
					</div>
					<div className="autofit-col">
						<div className="custom-control custom-checkbox">
							<label>
								<input
									className="custom-control-input"
									tabIndex="-1"
									type="checkbox"
								/>
								<span className="custom-control-label"></span>
							</label>
						</div>
					</div>
					<div className="autofit-col">
						<div className="component-icon">
							<svg
								className="lexicon-icon lexicon-icon-folder"
								focusable="false"
								role="presentation"
							>
								<use
									xlinkHref="/images/icons/icons.svg#folder"
								/>
							</svg>
						</div>
					</div>
					<div className="autofit-col autofit-col-expand">
						<span className="component-text">
							<span className="autofit-row">
								<span
									className="autofit-col autofit-col-shrink"
								>
									<span
										className="text-truncate-inline"
										data-toggle="tooltip"
										title="Documents and Media"
										><span className="text-truncate"
											>Documents and Media</span
										></span
									>
								</span>
								<span className="autofit-col">
									<button
										className="btn btn-secondary quick-action-item ml-4"
										tabIndex="-1"
										type="button"
									>
										<span className="c-inner" tabIndex="-2"
											>Check child nodes</span
										>
									</button>
								</span>
							</span>
						</span>
					</div>
				</div>
			</div>
		</div>
		<div className="collapse" id="treeviewCollapseCheckboxHoverBtn04">
			<ul className="treeview-group" role="group">
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<div
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<div className="autofit-row">
								<div className="autofit-col">
									<div
										className="custom-control custom-checkbox"
									>
										<label>
											<input
												className="custom-control-input"
												tabIndex="-1"
												type="checkbox"
											/>
											<span
												className="custom-control-label"
											></span>
										</label>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Default User Associations"
											><span className="text-truncate"
												>Default User Associations</span
											></span
										></span
									>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<div
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<div className="autofit-row">
								<div className="autofit-col">
									<div
										className="custom-control custom-checkbox"
									>
										<label>
											<input
												className="custom-control-input"
												tabIndex="-1"
												type="checkbox"
											/>
											<span
												className="custom-control-label"
											></span>
										</label>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Staging"
											><span className="text-truncate"
												>Staging</span
											></span
										></span
									>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<div
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<div className="autofit-row">
								<div className="autofit-col">
									<div
										className="custom-control custom-checkbox"
									>
										<label>
											<input
												className="custom-control-input"
												tabIndex="-1"
												type="checkbox"
											/>
											<span
												className="custom-control-label"
											></span>
										</label>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Analytics"
											><span className="text-truncate"
												>Analytics</span
											></span
										></span
									>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li className="treeview-item" role="none">
					<div
						className="treeview-link"
						role="treeitem"
						tabIndex="-1"
						style={{paddingLeft: '24px'}}
					>
						<div
							className="c-inner"
							tabIndex="-2"
							style={{marginLeft: '-24px'}}
						>
							<div className="autofit-row">
								<div className="autofit-col">
									<div
										className="custom-control custom-checkbox"
									>
										<label>
											<input
												className="custom-control-input"
												tabIndex="-1"
												type="checkbox"
											/>
											<span
												className="custom-control-label"
											></span>
										</label>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<span className="component-text"
										><span
											className="text-truncate-inline"
											data-toggle="tooltip"
											title="Maps"
											><span className="text-truncate"
												>Maps</span
											></span
										></span
									>
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</li>
</ul>