@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
972 lines (954 loc) • 50.3 kB
Markdown
---
id: Tree view
section: components
cssPrefix: pf-c-tree-view
beta: true
---
## Examples
### Default
```html
<div class="pf-c-tree-view">
<ul class="pf-c-tree-view__list" role="tree">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application launcher</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-active">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 1</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-current">
<span class="pf-c-tree-view__node-text">Current</span>
</button>
</div>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 2</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loader</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loading app 1</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 2</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 3</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Cost management</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Sources</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">This is a really really really long folder name that overflows from the width of the container.</span>
</button>
</div>
</li>
</ul>
</div>
```
### With-search
```html
<div class="pf-c-tree-view">
<div class="pf-c-tree-view__search">
<input class="pf-c-form-control pf-m-search" type="search" id="input-search" name="search-input" aria-label="Search input example" />
</div>
<hr class="pf-c-divider" />
<ul class="pf-c-tree-view__list" role="tree">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application launcher</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-active">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 1</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-current">
<span class="pf-c-tree-view__node-text">Current</span>
</button>
</div>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 2</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loader</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loading app 1</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 2</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 3</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Cost management</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Sources</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">This is a really really really long folder name that overflows from the width of the container.</span>
</button>
</div>
</li>
</ul>
</div>
```
### With-checkboxes
```html
<div class="pf-c-tree-view">
<ul class="pf-c-tree-view__list" role="tree">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Application launcher</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-active">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Application 1</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-current">
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Current</span>
</button>
</div>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Application 2</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Loader</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Loading app 1</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Loader app 2</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Loader app 3</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Cost management</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">Sources</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-check">
<input type="checkbox" aria-label="Tree view node check" />
</span>
<span class="pf-c-tree-view__node-text">This is a really really really long folder name that overflows from the width of the container.</span>
</button>
</div>
</li>
</ul>
</div>
```
### With-icons
```html
<div class="pf-c-tree-view">
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder-open" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application launcher</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-active">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder-open" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 1</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-current">
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Current</span>
</button>
</div>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder-open" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 2</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder-open" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loader</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loading app 1</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loader app 2</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loader app 3</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Cost management</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Sources</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-icon">
<i class="fas fa-folder" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">This is a really really really long folder name that overflows from the width of the container.</span>
</button>
</div>
</li>
</ul>
</div>
```
### With-badges
```html
<div class="pf-c-tree-view">
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application launcher</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-active">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 1</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-current">
<span class="pf-c-tree-view__node-text">Current</span>
</button>
</div>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 2</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loader</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loading app 1</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 2</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 3</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Cost management</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Sources</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">This is a really really really long folder name that overflows from the width of the container.</span>
<span class="pf-c-tree-view__node-count">
<span class="pf-c-badge pf-m-read">2</span>
</span>
</button>
</div>
</li>
</ul>
</div>
```
### With-action-item
```html
<div class="pf-c-tree-view">
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application launcher</span>
<button class="pf-c-tree-view__action" aria-label="Actions">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-active">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 1</span>
<button class="pf-c-tree-view__action" aria-label="Copy">
<i class="fas fa-clipboard" aria-hidden="true"></i>
</button>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node pf-m-current">
<span class="pf-c-tree-view__node-text">Current</span>
</button>
</div>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Application 2</span>
<button class="pf-c-tree-view__action" aria-label="Action">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Settings</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable pf-m-expanded" role="treeitem" aria-expanded="true" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loader</span>
</button>
</div>
<ul class="pf-c-tree-view__list" role="group">
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Loading app 1</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 2</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item" role="treeitem" aria-expanded="false" tabindex="-1">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-text">Loader app 3</span>
</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Cost management</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">Sources</span>
</button>
</div>
</li>
<li class="pf-c-tree-view__list-item pf-m-expandable" role="treeitem" aria-expanded="false" tabindex="0">
<div class="pf-c-tree-view__content">
<button class="pf-c-tree-view__node">
<span class="pf-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-tree-view__node-text">This is a really really really long folder name that overflows from the width of the container.</span>
<button class="pf-c-tree-view__action" aria-label="Alert">
<i class="fas fa-bell" aria-hidden="true"></i>
</button>
</button>
</div>
</li>
</ul>
</div>
```
## Documentation
### Overview
### Accessibility
| Attribute | Applied to | Outcome |
| ---------------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `role="tree"` | `.pf-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
| `role="group"` | `.pf-c-tree-view__list` | Identifies the `ul` element as a container of treeitem elements that form a branch of the tree. **Place on all `ul`s except the first `ul`** |
| `role="treeitem"` | `.pf-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
| `aria-expanded="false"` | `.pf-c-tree-view__list-item.pf-m-expandable` | Indicates the parent node is closed, i.e., the descendant elements are not visible. |
| `aria-expanded="true"` | `.pf-c-tree-view__list-item.pf-m-expandable.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
| `tabindex="-1"` | `.pf-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
| `tabindex="0"` | `.pf-c-tree-view__list-item` | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
| `aria-label="[button label text]"` | `.pf-c-tree-view__action` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
### Usage
| Class | Applied | Outcome |
| ----------------------------------- | ----------------------- | ----------------------------------------------------- |
| `.pf-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
| `.pf-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
| `.pf-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
| `.pf-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
| `.pf-c-tree-view__node` | `<button>`, `<a>` | Initiates a tree view node. **Required** |
| `.pf-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
| `.pf-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
| `.pf-c-tree-view__node-text` | `<span>` | Initiates tree view text. |
| `.pf-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
| `.pf-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
| `.pf-c-tree-view__action` | `<button>` | Initiates a tree view action. |
| `.pf-c-tree-view__search` | `<div>`