A 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.


  • Trees should be used primarily for the purposes of navigation or filtering.


Tree default#

<Storybook height="350px" path="/story/iqmetrix-antd-data-display--tree" />


  • 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.

Related components#

Last updated on by tanyalisleiq