Skip to content
Patternfly Logo

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.

Examples

Default

With checkboxes

With icons

With badges

With action item

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 uls 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
For an expandable item, 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-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
<div>
Initiates a tree view toggle.
.pf-c-tree-view__node-toggle-button
<button>
Initiates a tree view toggle button.
.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__node
Modifies 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
calc(1rem * 2 + 1rem)
.pf-c-tree-view--pf-c-tree-view__node--nested-indent--base
calc(calc(1rem * 2 + 1rem) - 1rem)
.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
.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__list-item__list-item__node-toggle--Top
0.5rem
.pf-c-tree-view--pf-c-tree-view__list-item__list-item__node-toggle--Left
0
.pf-c-tree-view--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX
-100%
.pf-c-tree-view--pf-c-tree-view__node-toggle-icon--MinWidth
1rem
.pf-c-tree-view--pf-c-tree-view__node-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-tree-view--pf-c-tree-view__node-toggle-button--PaddingTop
0.375rem
.pf-c-tree-view--pf-c-tree-view__node-toggle-button--PaddingRight
1rem
.pf-c-tree-view--pf-c-tree-view__node-toggle-button--PaddingBottom
0.375rem
.pf-c-tree-view--pf-c-tree-view__node-toggle-button--PaddingLeft
1rem
.pf-c-tree-view--pf-c-tree-view__node-toggle-button--MarginTop
calc(0.375rem * -1)
.pf-c-tree-view--pf-c-tree-view__node-toggle-button--MarginBottom
calc(0.375rem * -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__list-item--m-expanded__node-toggle-icon--Rotate
90deg
.pf-c-tree-view--pf-c-tree-view__node-text--max-lines
1
.pf-c-tree-view--pf-c-tree-view__action--MarginLeft
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__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(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__list-item__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__list-item__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem))
.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__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem))
.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__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem))
.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__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem))
.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__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem))
.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__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem))
.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__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem))
.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__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem))
.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(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem))
.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__list-item__list-item__node-toggle--Left
calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem))

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines