A tree component structures parent and child nodes into a meaningful hierarchy.
TODO:Add tree example Create an issue
- Caret: Identifies when the node is open or closed. Pointing down is open. Pointing right is closed.
- Icon: Indicates what type of node it is.
- Avatar: Supporting visual for the node title.
- Title: Identifies the node.
- Description (optional): Describes the node.
- Connector: Visual aid to indicate hierarchy and connections.
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.
- 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.
There are two primary interactions in a tree:
- Expanding and collapsing nodes.
- Links to node content.
- The title should be clear and concise.
- Additional content, like an avatar, icon, label, or description can be attributes of the node.
- A tree view uses a containing element with the
treerole. Nodes use the
- 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: