Skip to content
Patternfly Logo

Tree view

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Default

With checkboxes

With icons

With badges

With action item

With non-expandable top level nodes

With selectable, expandable nodes

  • Application launcher
    • Application 1
    • Application 2
      • Loader

Guides

Compact

Compact, no background

Documentation

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>, <label>
Initiates a tree view node. Required
.pf-c-tree-view__node-container
<span>
Initiates a tree view node container. Required for compact variant
.pf-c-tree-view__node-content
<span>
Initiates a tree view node content container used to stack elements.
.pf-c-tree-view__node-count
<span>
Initiates a tree view node count.
.pf-c-tree-view__node-toggle
<span>, <button>
Initiates a tree view toggle.
.pf-c-tree-view__node-toggle-icon
<span>
Initiates a tree view toggle icon.
.pf-c-tree-view__node-title
<span>
Initiates a tree view node title.
.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-guides
.pf-c-tree-view
Modifies the tree view to the guides presentation.
.pf-m-compact
.pf-c-tree-view
Modifies the tree view to the compact presentation.
.pf-m-no-background
.pf-c-tree-view.pf-m-compact
Modifies the tree view compact variant node containers to have a transparent background.
.pf-m-current
.pf-c-tree-view__node
Modifies the tree view node to be current.
.pf-m-selectable
.pf-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-truncate
.pf-c-tree-view, .pf-c-tree-view__node-title, .pf-c-tree-view__node-text
Modifies the tree view title or text to truncate.

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)