Breadcrumb for lightning-tree

Question

I have a lightining-tree component for Role Hierarchy. This is the item:

<!-- ROLE TREEVIEW -->
<lightning-tree items={items} onselect={handleSelectAssign}></lightning-tree>
<!-- END ROLE TREEVIEW -->

This is how it looks now:

And now I need to implement a breadcrumb when a Role is clicked, showing the hierarchy of the selected role at this breadcrumb. Is it possible?

Best regards, Renato

Answer 1

Yes, you can do this with a simple recursive function. I wrote a demo for you.

  handleSelect(event) {
    // Used to find a node recursively
    const find = (path, node, name) => {
      // This is the node we wanted, return the final array here
      if(node.name === name) {
        return [...path, node];
      }
      // There are children to search through
      if(node.items) {
        // For each child, try to find a matching child, 
        // returns 0 if none found, which will go to parent's next child
        return node.items.reduce((prev, item) => {
          return prev || find([...path, node], item, name)
        }, 0);
      }
    }
    this.breadcrumbs = find([], { items: this.items }, event.detail.name).slice(1);
  }