Tree view

A tree view is a structure that displays data in a hierarchical view.

Examples

Single selectable

- Application 2 (disabled item and toggle)
  - Settings

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.

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.

With icons

With badges

With action item

With non-expandable top level nodes

With selectable, expandable nodes

Guides

Compact

Compact, no background

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-disabled`	`.pf-v6-c-tree-view__node`	Modifies the tree view node to display as disabled.
`.pf-m-disabled`	`.pf-v6-c-tree-view__node-toggle`	Modifies the tree view node toggle to display as disabled.
`.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.

Edit this page on GitHub