Tree View

[alizedebray]

A Tree View is a hierarchical list where each list item, or node, might – or not – have children.
If a node has children it can be open or closed.
If a node does not have children it is considered as a leaf.
Children of a node are themselves shown in a tree view.

Use cases

• Navigation: the tree is used to represent a page structure

  • Any node is a link
    
  • Only the leaves are links
    
  • Leaf parents are links to pages and leaves are links to page sections
    

• Selecting: the tree is used to represent a data structure that can be selected

  • Single-select: any node can be selected
    

  • Multiple-select: any node can be selected
    

  • Single-select: only leaves can be selected

  • Multiple-select: only leaves can be selected

• Browsing: the tree is used to represent a data structure with attached actions
  

Variants

• Icons: an icon can be set for every node depending on its type
• Indent guides: vertical lines help to visually group all children with the same parent node
• Lazy loading: the children are loaded only if the parent node is opened
• Expand/collapse all: a button allows to open/close all parent nodes at once
• Ordering: nodes can be moved within the tree via drag and drop

Possible Architecture for Web Components

<post-tree>
    <post-tree-node>Node 1</post-tree-node>
    <post-tree-node>
        Node 2
        <post-tree>
            <post-tree-node>Node 2a</post-tree-node>
            <post-tree-node>Node 2b</post-tree-node>
        </post-tree>
    </post-tree-node>
</post-tree>

Resources

• w3: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
• Shoelace: https://shoelace.style/components/tree & https://shoelace.style/components/tree-item
• Angular CDK: https://material.angular.io/cdk/tree/overview