Components
Tree View
A tree view is a hierarchical structure that provides nested levels of navigation.
Overview
Tree view is a hierarchical list of items that may have a parent-child relationship where children can be toggled into view by expanding or collapsing their parent item.
The tree may also have leaf nodes. Leaf nodes can appear at any level of the tree hierarchy and do not have child nodes.
Anatomy
The tree view is composed of branch and leaf nodes that are designed to nest and organize large sets of information.
As recommendation, tree view should have at most three layers.
click to expand
M
Mandatory
O
Optional
Title
Child
Nested children
For each subsequent grandchild after secondary:
- margin-left of 32px or 2rem
- padding-left of 16px or 1rem
Alignment
Trees stack directly on top of each other with 0px space between them. Having tree nodes flush with each other ensures consistent spacing and alignment between each node in the tree view.
Nested nodes in a tree view rely on vertical type and left spacing. Each subsequent nested children will indent by 32px (2rem).
Content
Tree labels should be succinct for whatever entity each tree node represents.
By default, labels are truncated to a single line. However, tree labels may be wrapped to multiple lines in cases where the entire label must always be visible.
Keyboard Interaction
Press TAB key to move downward between the tree nodes.
Press SHIFT + TAB key combo to move upward between the tree nodes.
Press ENTER or SPACE to activate the tree nodes.
Components
Tokens
Primary/Default
Label = $global-action-content-primary-color-default
Icon = $global-action-content-primary-color-default
BG = $global-action-surface-primary-color-default
Active Bar = $global-action-border-primary-color-active
Border = $global-static-border-color-default
Focus = $global-action-border-color-focus
Primary/Hover
Label = $global-action-content-primary-color-hover
Icon = $global-action-content-primary-color-hover
BG = $global-action-surface-primary-color-hover
Active Bar = null
Border = $global-static-border-color-default
Focus = null
Child/Default
Border = $global-static-border-color-disabled
Child/Hover
Border = $global-static-border-color-disabled