Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Tree

A tree component is a user interface element used to display hierarchical data in a collapsible and expandable tree-like structure, often used for navigation or categorization.

banner-Tree

Anatomy

Tree component is a versatile user interface element designed to display hierarchical data in a tree-like structure.

anatomy navbar

  1. Root Node: The top-level node from which the tree structure begins.

  2. Parent Node: A node that contains child nodes, forming the hierarchy.

  3. Child Node: Nodes that are nested within a parent node.

  4. Expand/Collapse Icons: Icons or buttons that allow users to expand or collapse child nodes.

Usage

The Tree component can be used to display hierarchical data in a variety of contexts, such as:

  • File systems
  • Product catalogs
  • Organizational charts
  • Navigation menus
  • Breadcrumb trails

When to use

  • When you need to display a hierarchical structure of data in a compact and easy-to-navigate way.
  • When you need to allow users to expand and collapse nodes to reveal or hide child nodes.
  • When you need to allow users to select nodes to take actions on.

When not to use

  • When you need to display a limited number of items in a list.
  • When you need to display items in a fixed order.
  • When you need to allow users to sort or filter the items.

Accessibility

To ensure that the Tree component is accessible to all users, consider the following guidelines:

  • Make sure that the tree is keyboard accessible.
  • Ensure that screen readers can interpret and announce the tree structure accurately.
  • Make sure interactive elements (such as expand/collapse icons or selection indicators) have visible focus indicators for keyboard users.
  • Use semantic HTML elements to build the tree structure.
Alt text

Do

Provide meaningful labels for each node to aid users in understanding the content.

Alt text

Don't

Didn’t provide meaningful labels for each node to aid users in understanding the content.

Content

The Tree component can be used to display a variety of content types, such as:

  • Text
  • Images
  • Icons
  • Links
  • Other components
Alt text

Do

A product catalog tree might display the names of product categories and products.

Alt text

Don't

A product catalog tree didn’t display the names of product categories and products.