Skip to Content

Tree view

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesDocumentationCSS Variables



With checkboxes

With icons

With badges

With action item




AttributeApplied toOutcome
role="tree".pf-c-tree-view__listIdentifies the ul as a tree widget. Place on the outermost ul only
role="group".pf-c-tree-view__listIdentifies the ul element as a container of treeitem elements that form a branch of the tree. Place on all uls except the first ul
role="treeitem".pf-c-tree-view__list-itemHides the implicit listitem role of the li element from assistive technologies.
aria-expanded="false" the parent node is closed, i.e., the descendant elements are not visible.
aria-expanded="true" the parent node is open, i.e., the descendant elements are visible.
tabindex="-1".pf-c-tree-view__list-itemMakes the element with the treeitem role focusable without including it in the tab sequence of the page.
tabindex="0".pf-c-tree-view__list-itemIncludes 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__actionProvides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text


.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>Initiates a tree view search wrapper. the tree view node to be the root node item. the tree view node to be current.

CSS Variables