Skip to content
PatternFly logo

Tree view

A tree view is a structure that displays data in a hierarchical view. It can be used in a dropdown, drawer, primary-detail, modal, or wizard.

Examples

Default

With separate selection and expansion

The hasSelectableNodes modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected with toggling its expansion.

With checkboxes

With icons

With badges

With custom badges

With action items

Guides

Compact

Compact, no background

With memoization

Turning on memoization with the useMemo property helps prevent unnecessary re-renders for large data sets. With this flag active, activeItems must pass in an array of nodes along the selected item's path to update properly.

Props

TreeView

The main tree view component.
*required
NameTypeDefaultDescription
datarequiredTreeViewDataItem[]Data of the tree view.
activeItemsTreeViewDataItem[]Active items of tree view.
allExpandedbooleanSets the expanded state on all tree nodes, overriding default behavior and current internal state.
classNamestringClass to add if not passed a parentItem property.
compareItems(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean(item, itemToCheck) => item.id === itemToCheck.idComparison function for determining active items.
defaultAllExpandedbooleanfalseSets the default expanded behavior.
expandedIconReact.ReactNodeIcon for all expanded node items.
hasBadgesbooleanfalseFlag indicating if all nodes in the tree view should have badges.
hasChecksbooleanfalseFlag indicating if all nodes in the tree view should have checkboxes.
hasGuidesbooleanfalseFlag indicating if the tree view has guide lines.
hasSelectableNodesbooleanfalseFlag indicating that tree nodes should be independently selectable, even when having children.
iconReact.ReactNodeIcon for all leaf or unexpanded node items.
idstringID of the tree view.
isNestedbooleanfalseFlag indicating if the tree view is nested.
onCheck(event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for item checkbox selection.
onSelect(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for item selection.
parentItemTreeViewDataItemInternal. Parent item of a tree view list item.
toolbarReact.ReactNodeToolbar to display above the tree view.
useMemobooleanFlag indicating the tree view should utilize memoization to help render large data sets. Setting this property requires that the activeItems property is passed an array containing every node in the selected item's path.
variant'default' | 'compact' | 'compactNoBackground''default'Variant presentation styles for the tree view.

TreeViewDataItem

Properties that make up a tree view data item. These properties should be passed in as an object to one of the various tree view component properties which accept TreeViewDataItem as a type.
*required
NameTypeDefaultDescription
namerequiredReact.ReactNodeInternal content of a tree view item.
actionReact.ReactNodeAction of a tree view item, which can be either a button or dropdown component.
badgePropsanyAdditional properties of the tree view item badge.
checkPropsTreeViewCheckPropsAdditional properties of the tree view item checkbox.
childrenTreeViewDataItem[]Child nodes of a tree view item.
customBadgeContentReact.ReactNodeOptional prop for a custom badge.
defaultExpandedbooleanFlag indicating if node is expanded by default.
expandedIconReact.ReactNodeExpanded icon of a tree view item.
hasBadgebooleanFlag indicating if a tree view item has a badge.
hasCheckbooleanFlag indicating if a tree view item has a checkbox.
iconReact.ReactNodeDefault icon of a tree view item.
idstringID of a tree view item.
titleReact.ReactNodeTitle of a tree view item. Only used in compact presentations.

TreeViewSearch

Renders a search input for the tree view. This sub-component should be passed into the tree view component's toolbar property.
*required
NameTypeDefaultDescription
aria-labelstringAccessible label for the search input.
classNamestringClasses applied to the wrapper for the search input.
idstringId for the search input.
namestringName for the search input.
onSearch(event: React.ChangeEvent<HTMLInputElement>) => voidCallback for search input.

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--base
0.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
calc(1rem * 2 + 1rem)
.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-container--Display
contents
.pf-c-tree-view--pf-c-tree-view__node-content--RowGap
0.5rem
.pf-c-tree-view--pf-c-tree-view__node-content--Overflow
visible
.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
calc(1rem * 2 + 1rem)
.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--Position
absolute
.pf-c-tree-view--pf-c-tree-view__node-toggle--Color--base
#6a6e73
.pf-c-tree-view--pf-c-tree-view__node-toggle--Color
#6a6e73
.pf-c-tree-view--pf-c-tree-view__node-toggle--hover--Color
#151515
.pf-c-tree-view--pf-c-tree-view__node-toggle--focus--Color
#151515
.pf-c-tree-view--pf-c-tree-view__node-toggle--active--Color
#151515
.pf-c-tree-view--pf-c-tree-view__list-item--m-expanded__node-toggle--Color
#151515
.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
transform 250ms cubic-bezier(.645, .045, .355, 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__node-toggle-icon--base--Rotate
0
.pf-c-tree-view--pf-c-tree-view__node-toggle-icon--Rotate
0
.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__node-title--FontWeight
700
.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--pf-c-tree-view--m-guides--guide--Left
calc(calc(1rem * 2 + 1rem) - 1.5rem)
.pf-c-tree-view--pf-c-tree-view--m-guides--guide-color--base
#d2d2d2
.pf-c-tree-view--pf-c-tree-view--m-guides--guide-width--base
1px
.pf-c-tree-view--pf-c-tree-view--m-guides--guide-left--base
calc(calc(1rem * 2 + 1rem) - 1.5rem)
.pf-c-tree-view--pf-c-tree-view--m-guides--guide-left--base--offset
calc(calc(1rem * 2 + 1rem) + 1rem / 2)
.pf-c-tree-view--pf-c-tree-view--m-guides__list-node--guide-width--base
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-guides__list-item--before--Top
0
.pf-c-tree-view--pf-c-tree-view--m-guides__list-item--before--Width
1px
.pf-c-tree-view--pf-c-tree-view--m-guides__list-item--before--Height
100%
.pf-c-tree-view--pf-c-tree-view--m-guides__list-item--before--BackgroundColor
#d2d2d2
.pf-c-tree-view--pf-c-tree-view--m-guides__list-item--last-child--before--Top
1.125rem
.pf-c-tree-view--pf-c-tree-view--m-guides__list-item--last-child--before--Height
1.125rem
.pf-c-tree-view--pf-c-tree-view--m-guides__list-item--ZIndex
100
.pf-c-tree-view--pf-c-tree-view--m-guides__node--before--Width
1rem
.pf-c-tree-view--pf-c-tree-view--m-guides__node--before--Height
1px
.pf-c-tree-view--pf-c-tree-view--m-guides__node--before--Top
1.125rem
.pf-c-tree-view--pf-c-tree-view--m-guides__node--before--BackgroundColor
#d2d2d2
.pf-c-tree-view--pf-c-tree-view--m-compact--base-border--Left--offset
1rem
.pf-c-tree-view--pf-c-tree-view--m-compact--base-border--Left
calc(calc(1rem * 2 + 1rem) - 1rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__node--indent--base
calc(1rem * 2 + 1rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__node--nested-indent--base
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact--border--Left
calc(calc(1rem * 2 + 1rem) - 1rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__node--PaddingTop
0
.pf-c-tree-view--pf-c-tree-view--m-compact__node--PaddingBottom
0
.pf-c-tree-view--pf-c-tree-view--m-compact__node--nested--PaddingTop
0.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node--nested--PaddingBottom
0.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top
calc(1.5rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item--BorderBottomWidth
1px
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item--BorderBottomColor
#d2d2d2
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item--before--Top
0
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item--last-child--before--Height
calc(1.5rem + 0.5rem + 0.25rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item--nested--before--Top
calc(0.5rem * -1)
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height
calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__node--PaddingLeft
calc(1rem * 2 + 1rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__node--before--Top
calc(1.5rem + 0.5rem + 0.25rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__node--level-2--PaddingLeft
calc(1rem * 2 + 1rem)
.pf-c-tree-view--pf-c-tree-view--m-compact__node-toggle--nested--MarginRight
calc(1rem * -.5)
.pf-c-tree-view--pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft
calc(1rem * -1.5)
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--Display
flex
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--PaddingBottom--base
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--PaddingTop
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--PaddingRight
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--PaddingBottom
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--PaddingLeft
0.25rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--nested--PaddingTop
1rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--nested--PaddingRight
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--nested--PaddingBottom
1rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--nested--PaddingLeft
1.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact__node-container--nested--BackgroundColor
#f0f0f0
.pf-c-tree-view--pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom
0
.pf-c-tree-view--pf-c-tree-view--m-no-background__node-container--BackgroundColor
transparent
.pf-c-tree-view--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset
0.5rem
.pf-c-tree-view--pf-c-tree-view--m-compact--m-no-background--base-border--Left
calc(calc(1rem * 2 + 1rem) - 0.5rem)
.pf-c-tree-view--pf-c-tree-view--m-compact--m-no-background__node--indent--base
calc(1rem * 2 + 1rem)
.pf-c-tree-view--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base
3rem
.pf-c-tree-view--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop
0
.pf-c-tree-view--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom
0
.pf-c-tree-view--pf-c-tree-view--m-compact--m-no-background__node--before--Top
calc(1rem + 0.5rem + 0.25rem)
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-guides--guide--Left
calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) - calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) + 1rem / 2))
.pf-c-tree-view.pf-m-compact .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(1.5rem * 1 + calc(1rem * 2 + 1rem))
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact--border--Left
calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) - 1rem)
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact__list-item--before--Top
calc(0.5rem * -1)
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact__list-item--last-child--before--Height
calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem)
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:last-child--pf-c-tree-view--m-compact__list-item--BorderBottomWidth
0
.pf-c-tree-view.pf-m-compact--pf-c-tree-view__node--PaddingTop
0
.pf-c-tree-view.pf-m-compact--pf-c-tree-view__node--PaddingBottom
0
.pf-c-tree-view.pf-m-compact--pf-c-tree-view__node-container--Display
flex
.pf-c-tree-view.pf-m-compact--pf-c-tree-view__node--hover--BackgroundColor
transparent
.pf-c-tree-view.pf-m-compact--pf-c-tree-view__node--focus--BackgroundColor
transparent
.pf-c-tree-view.pf-m-compact--pf-c-tree-view__list-item__list-item__node-toggle--Top
calc(1.5rem)
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item.pf-m-expanded--pf-c-tree-view--m-compact__node-container--PaddingBottom
0
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingTop
0.5rem
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingBottom
0.5rem
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node-toggle--Position
static
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingLeft
calc(1rem * 2 + 1rem)
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX
0
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact__list-item--BorderBottomWidth
0
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact__node-container--PaddingBottom
1.5rem
.pf-c-tree-view.pf-m-compact.pf-m-no-background--pf-c-tree-view--m-compact__node--before--Top
calc(1rem + 0.5rem + 0.25rem)
.pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingTop
0
.pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node--PaddingBottom
0
.pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact--border--Left
calc(calc(3rem * 1 + calc(1rem * 2 + 1rem)) - 0.5rem)
.pf-c-tree-view.pf-m-compact.pf-m-no-background .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(3rem * 1 + calc(1rem * 2 + 1rem))
.pf-c-tree-view.pf-m-no-background--pf-c-tree-view--m-compact__node-container--nested--BackgroundColor
transparent
.pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node-toggle-icon--Rotate
0
.pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view__node-toggle--Color
#6a6e73
.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__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--m-guides--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) + 1rem / 2))
.pf-c-tree-view__list-item.pf-m-expanded--pf-c-tree-view__node-toggle--Color
#151515
.pf-c-tree-view__list-item.pf-m-expanded--pf-c-tree-view__node-toggle-icon--Rotate
90deg
.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__node:not(.pf-m-selectable):hover--pf-c-tree-view__node-toggle--Color
#151515
.pf-c-tree-view__node:not(.pf-m-selectable):focus--pf-c-tree-view__node-toggle--Color
#151515
.pf-c-tree-view__node:not(.pf-m-selectable):active--pf-c-tree-view__node-toggle--Color
#151515
.pf-c-tree-view__node-title.pf-m-truncate--pf-c-tree-view__node-content--Overflow
hidden
.pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-title--pf-c-tree-view__node-content--Overflow
hidden
.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__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__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--m-guides--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) + 1rem / 2))
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact__node--PaddingLeft
calc(1.5rem * 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--m-compact--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - 1rem)
.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item--pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft
calc(3rem * 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--m-compact--m-no-background--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - 0.5rem)
.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__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--m-guides--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) + 1rem / 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--m-compact__node--PaddingLeft
calc(1.5rem * 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--m-compact--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - 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--m-compact--m-no-background__node--PaddingLeft
calc(3rem * 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--m-compact--m-no-background--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - 0.5rem)
.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__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--m-guides--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) + 1rem / 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__list-item--pf-c-tree-view--m-compact__node--PaddingLeft
calc(1.5rem * 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--m-compact--border--nested--Left
calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - 1rem)