Patternfly Logo

Info alert:Beta feature

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

Examples

Default

With checkboxes

With icons

With badges

With action item

  • Application launcher
    • Application 1
    • Application 2
      • Loader

Documentation

Overview

Accessibility

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".pf-c-tree-view__list-item.pf-m-expandableIndicates 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-expandedIndicates 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

Usage

ClassAppliedOutcome
.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<div>Initiates a tree view action wrapper.
.pf-c-tree-view__search<div>Initiates a tree view search wrapper.
.pf-m-current.pf-c-tree-view__nodeModifies the tree view node to be current.

CSS variables

.pf-c-tree-view--pf-c-tree-view--PaddingTop
0.5rem
.pf-c-tree-view--pf-c-tree-view--PaddingBottom
0.5rem
.pf-c-tree-view--pf-c-tree-view__node--indent--base
0.5rem
.pf-c-tree-view--pf-c-tree-view__node--nested-indent--base
1.5rem
.pf-c-tree-view--pf-c-tree-view__item--m-expandable__node--nested-indent--base
1.5rem
.pf-c-tree-view--pf-c-tree-view__node--PaddingTop
0.5rem
.pf-c-tree-view--pf-c-tree-view__node--PaddingRight
0.5rem
.pf-c-tree-view--pf-c-tree-view__node--PaddingBottom
0.5rem
.pf-c-tree-view--pf-c-tree-view__node--PaddingLeft
0.5rem
.pf-c-tree-view--pf-c-tree-view__node--Color
#151515
.pf-c-tree-view--pf-c-tree-view__node--m-current--Color
#06c
.pf-c-tree-view--pf-c-tree-view__node--m-current--FontWeight
700
.pf-c-tree-view--pf-c-tree-view__node--hover--BackgroundColor
#f0f0f0
.pf-c-tree-view--pf-c-tree-view__node--focus--BackgroundColor
#f0f0f0
.pf-c-tree-view--pf-c-tree-view__node-toggle--PaddingRight
0.5rem
.pf-c-tree-view--pf-c-tree-view__node-toggle--MinWidth
1.5rem
.pf-c-tree-view--pf-c-tree-view__node-toggle--MinHeight
undefined
.pf-c-tree-view--pf-c-tree-view__node-toggle--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-tree-view--pf-c-tree-view__node-check--MarginRight
0.5rem
.pf-c-tree-view--pf-c-tree-view__node-count--MarginLeft
0.5rem
.pf-c-tree-view--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor
#d2d2d2
.pf-c-tree-view--pf-c-tree-view__search--PaddingTop
0.5rem
.pf-c-tree-view--pf-c-tree-view__search--PaddingRight
0.5rem
.pf-c-tree-view--pf-c-tree-view__search--PaddingBottom
0.5rem
.pf-c-tree-view--pf-c-tree-view__search--PaddingLeft
0.5rem
.pf-c-tree-view--pf-c-tree-view__node-icon--PaddingRight
0.5rem
.pf-c-tree-view--pf-c-tree-view__node-icon--Color
#6a6e73
.pf-c-tree-view--pf-c-tree-view__node-text--max-lines
1
.pf-c-tree-view--pf-c-tree-view__action--PaddingLeft
1rem
.pf-c-tree-view--pf-c-tree-view__action--focus--BackgroundColor
#f0f0f0
.pf-c-tree-view--pf-c-tree-view__action--Color
#6a6e73
.pf-c-tree-view--pf-c-tree-view__action--hover--Color
#151515
.pf-c-tree-view--pf-c-tree-view__action--focus--Color
#151515
.pf-c-tree-view--pf-c-tree-view__action--MarginTop
calc(-1 * 0.375rem)
.pf-c-tree-view--pf-c-tree-view__action--MarginBottom
calc(-1 * 0.375rem)
.pf-c-tree-view--pf-c-tree-view__action--MarginRight
calc(-1 * 0.375rem)
.pf-c-tree-view__node.pf-m-current--pf-c-tree-view__node--Color
#06c
.pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read--pf-c-badge--m-read--BackgroundColor
#d2d2d2
.pf-c-tree-view__action:hover--pf-c-tree-view__action--Color
#151515
.pf-c-tree-view__action:focus--pf-c-tree-view__action--Color
#151515
.pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 1))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 1))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 2))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 2))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 3))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 3))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 4))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 4))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 5))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 5))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 6))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 6))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 7))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 7))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 8))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 8))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 9))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 9))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 10))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable--pf-c-tree-view__node--PaddingLeft
calc(0.5rem + (1.5rem * 10))

View source on GitHub