@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,294 lines (1,281 loc) • 159 kB
Markdown
---
id: Tree view
section: components
cssPrefix: pf-v6-c-tree-view
---## Examples
### Single selectable
```html
<div class="pf-v6-c-tree-view">
<ul
class="pf-v6-c-tree-view__list"
role="tree"
aria-label="Tree View single selectable example"
>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="true"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node pf-m-current">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Current</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader</span>
</span>
</button>
</div>
</li>
</ul>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Sources</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span
class="pf-v6-c-tree-view__node-text"
>This is a really really really long folder name that overflows from the width of the container.</span>
</span>
</button>
</div>
</li>
</ul>
</div>
```
### Multiselectable
A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, `aria-multiselectable="true"` must be passed to the root `ul[role="tree"]` element.
```html
<div class="pf-v6-c-tree-view">
<ul
class="pf-v6-c-tree-view__list"
role="tree"
aria-multiselectable="true"
aria-label="Tree View multiselectable example"
>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="true"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node pf-m-current">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Current</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader</span>
</span>
</button>
</div>
</li>
</ul>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="true"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node pf-m-current">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Sources</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span
class="pf-v6-c-tree-view__node-text"
>This is a really really really long folder name that overflows from the width of the container.</span>
</span>
</button>
</div>
</li>
</ul>
</div>
```
### With search
A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
```html
<div class="pf-v6-c-tree-view">
<div class="pf-v6-c-tree-view__search">
<div class="pf-v6-c-text-input-group">
<div class="pf-v6-c-text-input-group__main pf-m-icon">
<span class="pf-v6-c-text-input-group__text">
<span class="pf-v6-c-text-input-group__icon">
<i class="fas fa-fw fa-search"></i>
</span>
<input
class="pf-v6-c-text-input-group__text-input"
type="text"
placeholder="Search"
value
aria-label="Search input"
/>
</span>
</div>
</div>
</div>
<hr class="pf-v6-c-divider" />
<ul
class="pf-v6-c-tree-view__list"
role="tree"
aria-label="Tree View with search example"
>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="true"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node pf-m-current">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Current</span>
</span>
</button>
</div>
</li>
</ul>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Settings</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-selected="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader</span>
</span>
</button>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-tree-view__node-text">Sources</span>
</span>
</button>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-selected="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<button class="pf-v6-c-tree-view__node">
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-toggle">
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span
class="pf-v6-c-tree-view__node-text"
>This is a really really really long folder name that overflows from the width of the container.</span>
</span>
</button>
</div>
</li>
</ul>
</div>
```
### With checkboxes
```html
<div class="pf-v6-c-tree-view">
<ul
class="pf-v6-c-tree-view__list"
role="tree"
aria-label="Tree View with checkboxes example"
>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-checked="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node pf-m-selectable"
tabindex="0"
for="check-tree-view-checkboxes-1"
>
<span class="pf-v6-c-tree-view__node-container">
<button
class="pf-v6-c-tree-view__node-toggle"
id="toggle-tree-view-checkboxes-1"
aria-label="Toggle"
aria-labelledby="toggle-tree-view-checkboxes-1 text-tree-view-checkboxes-1"
>
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="check-tree-view-checkboxes-1"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-1 text-tree-view-checkboxes-1"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-1"
>Application launcher</span>
</span>
</label>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-checked="true"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node pf-m-selectable"
tabindex="0"
for="check-tree-view-checkboxes-2"
>
<span class="pf-v6-c-tree-view__node-container">
<button
class="pf-v6-c-tree-view__node-toggle"
id="toggle-tree-view-checkboxes-2"
aria-label="Toggle"
aria-labelledby="toggle-tree-view-checkboxes-2 text-tree-view-checkboxes-2"
>
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
checked
id="check-tree-view-checkboxes-2"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-2 text-tree-view-checkboxes-2"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-2"
>Application 1</span>
</span>
</label>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-checked="true"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node"
tabindex="0"
for="check-tree-view-checkboxes-3"
>
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
checked
id="check-tree-view-checkboxes-3"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-3 text-tree-view-checkboxes-3"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-3"
>Settings</span>
</span>
</label>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-checked="true"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node"
tabindex="0"
for="check-tree-view-checkboxes-4"
>
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
checked
id="check-tree-view-checkboxes-4"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-4 text-tree-view-checkboxes-4"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-4"
>Loader</span>
</span>
</label>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-checked="true"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node pf-m-selectable"
tabindex="0"
for="check-tree-view-checkboxes-5"
>
<span class="pf-v6-c-tree-view__node-container">
<button
class="pf-v6-c-tree-view__node-toggle"
id="toggle-tree-view-checkboxes-5"
aria-label="Toggle"
aria-labelledby="toggle-tree-view-checkboxes-5 text-tree-view-checkboxes-5"
>
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
checked
id="check-tree-view-checkboxes-5"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-5 text-tree-view-checkboxes-5"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-5"
>Loader</span>
</span>
</label>
</div>
</li>
</ul>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-checked="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node pf-m-selectable"
tabindex="0"
for="check-tree-view-checkboxes-6"
>
<span class="pf-v6-c-tree-view__node-container">
<button
class="pf-v6-c-tree-view__node-toggle"
id="toggle-tree-view-checkboxes-6"
aria-label="Toggle"
aria-labelledby="toggle-tree-view-checkboxes-6 text-tree-view-checkboxes-6"
>
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="check-tree-view-checkboxes-6"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-6 text-tree-view-checkboxes-6"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-6"
>Application 2</span>
</span>
</label>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-checked="false"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node pf-m-selectable"
tabindex="0"
for="check-tree-view-checkboxes-7"
>
<span class="pf-v6-c-tree-view__node-container">
<button
class="pf-v6-c-tree-view__node-toggle"
id="toggle-tree-view-checkboxes-7"
aria-label="Toggle"
aria-labelledby="toggle-tree-view-checkboxes-7 text-tree-view-checkboxes-7"
>
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="check-tree-view-checkboxes-7"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-7 text-tree-view-checkboxes-7"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-7"
>Settings</span>
</span>
</label>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-checked="false"
tabindex="-1"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node"
tabindex="0"
for="check-tree-view-checkboxes-8"
>
<span class="pf-v6-c-tree-view__node-container">
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="check-tree-view-checkboxes-8"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-8 text-tree-view-checkboxes-8"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-8"
>Settings</span>
</span>
</label>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item pf-m-expanded"
role="treeitem"
aria-checked="false"
aria-expanded="true"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node pf-m-selectable"
tabindex="0"
for="check-tree-view-checkboxes-9"
>
<span class="pf-v6-c-tree-view__node-container">
<button
class="pf-v6-c-tree-view__node-toggle"
id="toggle-tree-view-checkboxes-9"
aria-label="Toggle"
aria-labelledby="toggle-tree-view-checkboxes-9 text-tree-view-checkboxes-9"
>
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="check-tree-view-checkboxes-9"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-9 text-tree-view-checkboxes-9"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-9"
>Current</span>
</span>
</label>
</div>
<ul class="pf-v6-c-tree-view__list" role="group">
<li
class="pf-v6-c-tree-view__list-item"
role="treeitem"
aria-checked="true"
aria-expanded="false"
tabindex="0"
>
<div class="pf-v6-c-tree-view__content">
<label
class="pf-v6-c-tree-view__node pf-m-selectable"
tabindex="0"
for="check-tree-view-checkboxes-10"
>
<span class="pf-v6-c-tree-view__node-container">
<button
class="pf-v6-c-tree-view__node-toggle"
id="toggle-tree-view-checkboxes-10"
aria-label="Toggle"
aria-labelledby="toggle-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
>
<span class="pf-v6-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
<span class="pf-v6-c-tree-view__node-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
checked
id="check-tree-view-checkboxes-10"
aria-label="Select"
aria-labelledby="check-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
/>
</div>
</span>
<span
class="pf-v6-c-tree-view__node-text"
id="text-tree-view-checkboxes-10"
>Loader app 1</span>
</span>
</label>
</div>
</li>
<li
class="pf-v6-c-tree-view__list-item"
role="tre