TreeView
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'; |
Table of Contents
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.
See https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html for accessibility patterns.
Treeview Link indentation must be provided by javascript through inline
styles, use the styles padding-left: 24px; on .treeview-link and
margin-left: -24px on .treeview-link > .c-inner. Increase the
indentation for each level by increasing or decreasing padding-left or
margin-left by 24px.
<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.
- 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.
- 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.
Liferay Drive
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.
- 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.
- 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.
- 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.
<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.
<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>
Treeview Light
A treeview variation for light colored backgrounds.
<ul
className="treeview treeview-nested treeview-light show-quick-actions-on-hover"
role="tree"
>
<li className="treeview-item" role="none">
<div
aria-controls="treeviewLightCollapseCheckbox01"
aria-expanded="true"
className="treeview-link"
data-target="#treeviewLightCollapseCheckbox01"
data-toggle="collapse"
role="treeitem"
tabIndex="0"
>
<div className="c-inner" tabIndex="-2">
<div className="autofit-row">
<div className="autofit-col">
<button
aria-controls="treeviewLightCollapseCheckbox01"
aria-expanded="true"
className="btn btn-monospaced component-expander"
data-target="#treeviewLightCollapseCheckbox01"
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="text-truncate-inline"
title="Liferay Drive"
><span className="text-truncate"
>Liferay Drive</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div className="collapse show" id="treeviewLightCollapseCheckbox01">
<ul className="treeview-group" role="group">
<li className="treeview-item" role="none">
<div
aria-controls="treeviewLightCollapseCheckbox02"
aria-expanded="false"
className="collapsed treeview-link"
data-target="#treeviewLightCollapseCheckbox02"
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="treeviewLightCollapseCheckbox02"
aria-expanded="false"
className="btn btn-monospaced component-expander"
data-target="#treeviewLightCollapseCheckbox02"
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="text-truncate-inline"
title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)"
><span className="text-truncate"
>Liferay Drive
(ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div
className="collapse"
id="treeviewLightCollapseCheckbox02"
>
<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 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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li className="treeview-item" role="none">
<div
aria-controls="treeviewLightCollapseCheckbox03"
aria-expanded="false"
className="collapsed treeview-link"
data-target="#treeviewLightCollapseCheckbox03"
data-toggle="collapse"
role="treeitem"
tabIndex="-1"
>
<div className="c-inner" tabIndex="-2">
<div className="autofit-row">
<div className="autofit-col">
<button
aria-controls="treeviewLightCollapseCheckbox03"
aria-expanded="false"
className="btn btn-monospaced component-expander"
data-target="#treeviewLightCollapseCheckbox03"
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="text-truncate-inline"
title="Repositories"
><span className="text-truncate"
>Repositories</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div className="collapse" id="treeviewLightCollapseCheckbox03">
<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"
title="Sitemap"
><span className="text-truncate"
>Sitemap</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Robots"
><span className="text-truncate"
>Robots</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li className="treeview-item" role="none">
<div
aria-controls="treeviewLightCollapseCheckbox04"
aria-expanded="false"
className="collapsed treeview-link"
data-target="#treeviewLightCollapseCheckbox04"
data-toggle="collapse"
role="treeitem"
tabIndex="-1"
>
<div className="c-inner" tabIndex="-2">
<div className="autofit-row">
<div className="autofit-col">
<button
aria-controls="treeviewLightCollapseCheckbox04"
aria-expanded="false"
className="btn btn-monospaced component-expander"
data-target="#treeviewLightCollapseCheckbox04"
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="text-truncate-inline"
title="Documents and Media"
><span className="text-truncate"
>Documents and Media</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div className="collapse" id="treeviewLightCollapseCheckbox04">
<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"
title="Default User Associations"
><span className="text-truncate"
>Default User Associations</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Staging"
><span className="text-truncate"
>Staging</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Analytics"
><span className="text-truncate"
>Analytics</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Maps"
><span className="text-truncate"
>Maps</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
Treeview Dark
A treeview variation for dark colored backgrounds.
<div className="bg-dark">
<ul
className="treeview treeview-dark treeview-nested show-quick-actions-on-hover"
role="tree"
>
<li className="treeview-item" role="none">
<div
aria-controls="treeviewDarkCollapseCheckbox01"
aria-expanded="true"
className="treeview-link"
data-target="#treeviewDarkCollapseCheckbox01"
data-toggle="collapse"
role="treeitem"
tabIndex="0"
>
<div className="c-inner" tabIndex="-2">
<div className="autofit-row">
<div className="autofit-col">
<button
aria-controls="treeviewDarkCollapseCheckbox01"
aria-expanded="true"
className="btn btn-monospaced component-expander"
data-target="#treeviewDarkCollapseCheckbox01"
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="text-truncate-inline"
title="Liferay Drive"
><span className="text-truncate"
>Liferay Drive</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div className="collapse show" id="treeviewDarkCollapseCheckbox01">
<ul className="treeview-group" role="group">
<li className="treeview-item" role="none">
<div
aria-controls="treeviewDarkCollapseCheckbox02"
aria-expanded="false"
className="collapsed treeview-link"
data-target="#treeviewDarkCollapseCheckbox02"
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="treeviewDarkCollapseCheckbox02"
aria-expanded="false"
className="btn btn-monospaced component-expander"
data-target="#treeviewDarkCollapseCheckbox02"
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="text-truncate-inline"
title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)"
><span className="text-truncate"
>Liferay Drive
(ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div
className="collapse"
id="treeviewDarkCollapseCheckbox02"
>
<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 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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li className="treeview-item" role="none">
<div
aria-controls="treeviewDarkCollapseCheckbox03"
aria-expanded="false"
className="collapsed treeview-link"
data-target="#treeviewDarkCollapseCheckbox03"
data-toggle="collapse"
role="treeitem"
tabIndex="-1"
>
<div className="c-inner" tabIndex="-2">
<div className="autofit-row">
<div className="autofit-col">
<button
aria-controls="treeviewDarkCollapseCheckbox03"
aria-expanded="false"
className="btn btn-monospaced component-expander"
data-target="#treeviewDarkCollapseCheckbox03"
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="text-truncate-inline"
title="Repositories"
><span className="text-truncate"
>Repositories</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div className="collapse" id="treeviewDarkCollapseCheckbox03">
<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"
title="Sitemap"
><span className="text-truncate"
>Sitemap</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Robots"
><span className="text-truncate"
>Robots</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li className="treeview-item" role="none">
<div
aria-controls="treeviewDarkCollapseCheckbox04"
aria-expanded="false"
className="collapsed treeview-link"
data-target="#treeviewDarkCollapseCheckbox04"
data-toggle="collapse"
role="treeitem"
tabIndex="-1"
>
<div className="c-inner" tabIndex="-2">
<div className="autofit-row">
<div className="autofit-col">
<button
aria-controls="treeviewDarkCollapseCheckbox04"
aria-expanded="false"
className="btn btn-monospaced component-expander"
data-target="#treeviewDarkCollapseCheckbox04"
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="text-truncate-inline"
title="Documents and Media"
><span className="text-truncate"
>Documents and Media</span
></span
>
</span>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
<div className="collapse" id="treeviewDarkCollapseCheckbox04">
<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"
title="Default User Associations"
><span className="text-truncate"
>Default User
Associations</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Staging"
><span className="text-truncate"
>Staging</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Analytics"
><span className="text-truncate"
>Analytics</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</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"
title="Maps"
><span className="text-truncate"
>Maps</span
></span
></span
>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
Table of Contents