Tree

Hierarchical structure that visually represents relationships between items, often resembling a tree with branches and leaves

When you would use a tree

  1. You need to display complex, multi-level information, such as product categories.
  2. You want to provide a clear structure for navigating through nested content or options, making it easier for users to find specific items.

 

Best practices

Have a clear hierarchy

Ensure that the hierarchy is well-defined and easy to understand, with clear parent-child relationships that reflect the actual structure of the data.

 

Consistent indentation

Maintain consistent indentation and spacing to visually represent the depth of each level and make the hierarchy easier to follow.

 

Accessibility

Make sure users can navigate through items with a keyboard and screen reader support, to ensure that the tree is usable by all users, including those with disabilities.