Tree

A tree component structures parent and child nodes into a meaningful hierarchy.

Examples

TODO:
Add tree example Create an issue

View in Pajamas UI Kit →

Structure

Numbered diagram of a tree structure
  1. Caret: Identifies when the node is open or closed. Pointing down is open. Pointing right is closed.
  2. Icon: Indicates what type of node it is.
  3. Avatar: Supporting visual for the node title.
  4. Title: Identifies the node.
  5. Description (optional): Describes the node.
  6. Connector: Visual aid to indicate hierarchy and connections.

Guidelines

When to use

  • Create hierarchical structure to view and access parent and child nodes.

When not to use

  • If you need a way for a user to expand or collapse a content section, use an accordion instead.
  • To indicate page location in a navigational hierarchy, use a breadcrumb instead.
  • If you're organizing general content in a structured way, consider using a semantic HTML list instead.

Appearance

  • A tree follows a top-down pattern and each consecutive nested node (level) is indented to communicate the hierarchy.
  • Collapsed and expanded nodes should be distinguishable.

Behavior

There are two primary interactions in a tree:

  1. Expanding and collapsing nodes.
  2. Links to node content.

Content

  • The title should be clear and concise.
  • Additional content, like an avatar, icon, label, or description can be attributes of the node.

Accessibility

  • A tree view uses a containing element with the tree role. Nodes use the treeitem role.
  • See the WAI-ARIA tree view documentation to learn more about computed and declared ARIA properties and how to control focus and selection of node items.

Last updated at: