JSFiddle - React, Tailwind, and code Playground

HTML

<div id="breadcrumbs"></div>
<div id="nav">
  <ul>
    <li><a href="#1.html" id="1122">Root Group</a></li>
    <ul>
      <li><a href="#1a.html" id="1126">Northeast US</a></li>
      <ul>
        <li><a href="#1a1.html" id="1127">Massachusetts</a></li>
        <ul>
          <li><a href="#1a1a.html" id="1128">Mansfield-Foxboro</a></li>
          <li><a href="#1a1b.html" id="1129">North Attleboro</a></li>
        </ul>
        <li><a href="#1a2.html" id="1144">New Hampshire</a></li>
        <ul>
          <li><a href="#1a2a" id="1145" title="Manchester">Manchester</a></li>
        </ul>
      </ul>
      <li><a href="#1b.html" id="1181">Mid-Atlantic US</a></li>
      <ul>
        <li><a href="#1b1.html" id="1182">New York City</a></li>
        <ul>
          <li class="expanded node">
            <a href="#1b1a.html" id="1183" title="Times Square">Times Square</a>
          </li>
        </ul>
      </ul>
    </ul>
  </ul>
</div>

CSS

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

div#breadcrumbs {
    width: 500px;
    height: 20px;
    border: 1px solid #000;
}

JavaScript

$(document).ready(function() {
   // var path = location.pathname;
    var path = "#1.html";
    if (path) {$('li a[href$="' + path + '"]:first').attr('class', 'current');}
   
    var crumbs = $(".current").parents("ul")
    .prev("li").find("a").add(".current")
    .map(function() {
     
        link = $(this).attr('href');
        link_text = $(this).text();
        title = $(this).attr('title');
        bc = "<a href="+link+" title="+''+">"+link_text+"</a>";    
       alert(link_text);
 return bc; 
    }).get().join(" > ");
    $("#breadcrumbs").html(crumbs);
});