## Examples

### Single selectable


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### 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.


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### 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.


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### With checkboxes


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### With icons


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### With badges


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### With action item


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### With non-expandable top level nodes


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### With selectable, expandable nodes


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Guides


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Compact


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Compact, no background


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

## Documentation

### Usage

| Class | Applied | Outcome |
| -- | -- | -- |
| `.pf-v6-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
| `.pf-v6-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
| `.pf-v6-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
| `.pf-v6-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
| `.pf-v6-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. **Required** |
| `.pf-v6-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
| `.pf-v6-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
| `.pf-v6-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
| `.pf-v6-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
| `.pf-v6-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
| `.pf-v6-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
| `.pf-v6-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
| `.pf-v6-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
| `.pf-v6-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
| `.pf-v6-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
| `.pf-v6-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
| `.pf-m-guides` | `.pf-v6-c-tree-view` | Modifies the tree view to the guides presentation. |
| `.pf-m-compact` | `.pf-v6-c-tree-view` | Modifies the tree view to the compact presentation. |
| `.pf-m-no-background` | `.pf-v6-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
| `.pf-m-current` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to be current. |
| `.pf-m-selectable` | `.pf-v6-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
| `.pf-m-truncate` | `.pf-v6-c-tree-view`, `.pf-v6-c-tree-view__node-title`, `.pf-v6-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |