JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<span id="breadcrumb">Root</span>

<ul id="tree">
    <li>Root
        <ul>
            <li>Parent 1
                <ul>
                    <li>Child 1</li>
                    <li>Child 2</li>
                </ul>
            </li>
                        <li>Parent 2
                <ul>
                    <li>Child a</li>
                    <li>Child b</li>
                </ul>
            </li>

        </ul>
    </li>
</ul>

JavaScript

var selected;

$("#tree").kendoTreeView({
    select: function(e) {
        var breadcrumb = [];
        var treeView = this;
        $(e.node)
            .parents("li")
            .andSelf()
            .each(function() {
           
                var nodeText = $.trim(treeView.text(this));
                selected = nodeText;
                breadcrumb.push(nodeText);
            });
            
            debugger;
            
             $("#breadcrumb").html('');

        breadcrumb = breadcrumb.join(" > ");
        var nodeText = $.trim(treeView.text(this));
        breadcrumb = breadcrumb.split('>');

        $.each(breadcrumb, function (count){
        var abc = "<a href='" + breadcrumb[count] + "'>" + breadcrumb[count] + "</a>";
        $("#breadcrumb").append(" > ");  
        $("#breadcrumb").append(abc);  

 });

    }
});