Tree

Examples

TODO:

Add tree example Create an issue

View in Pajamas UI Kit →

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.