Tree
#
OverviewA tree is a visualization of a hierarchy structure. This is for the display component only.
#
Design Guidelines#
Use when- Nested data must be displayed within a hierarchy structure.
#
Don't use when- Data has one level of hierarchy.
- Data is being displayed for selection purposes.
#
Visual Style- If there are more items nested in the branch below an item, display an arrow to the left of the item.
- When a branch is expanded, the arrow points down.
- When a branch is collapsed, the arrow points right.
- Nested content should be indented underneath the parent heading.
#
Editorial- Trees should be used primarily for the purposes of navigation or filtering.
#
Examples#
Tree default#
Behaviour- To expand or collapse a branch, click on the arrow.
- Expanding the branch only reveals the branch immediately underneath, not any of the branches nested beneath.