JSFiddle - React, Tailwind, and code Playground

HTML

<div id="breadcrumbs"></div>
<div id="main_nav_wrap">
  <ul>
    <!-- Dropdown 1 -->
    <li>
      <a href="index.php" title="Return to the Home Page" class="current"><span>Home</span></a>
        </li>
    <!-- Dropdown 2 -->
        <li>
      <a href="about.php" title="About"><span>About</span></a>
            <ul>
                <li>
                    <a href="about1.php" title="About 1"><span>About 1</span></a>
                </li>
                <li>
                    <a href="about2.php" title="About 2"><span>About 2</span></a>
                </li>
                <li>
                    <a href="about3.php" title="About 3"><span>About 3</span></a>
                </li>
                <li>
                    <a href="about4.php" title="About 4"><span>About 4</span></a>
                    <ul>
                        <li><a href="about4_1.php" title="About 4-1"><span>About 4-1</span></a></li>
                        <li><a href="about4_2.php" title="About 4-2"><span>About 4-2</span></a></li>
                        <li><a href="about4_3.php" title="About 4-3"><span>About 4-3</span></a></li>
                        <li><a href="about4_4.php" title="About 4-4"><span>About 4-4</span></a></li>
                    </ul>
                </li>
                <li>
                    <a href="about5.php" title="About 5"><span>About 5</span></a>
                </li>
                <li>
                    <a href="about6.php" title="About 6"><span>About 6</span></a>
                </li>
            </ul>
        </li>
        <!-- Dropdown 3 -->
        <li>
      <a href="next_option.php" title="next_option"><span>next_option</span></a>
            <ul>
                <li>
                    <a href="next_option1.php" title="next_option 1"><span>next_option 1</span></a>
                    <ul>
                        <li><a href="next_option1_1.php" title="next_option 1-1"><span>next_option 1-1</span></a></li>
                    </ul>
       ...

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 = "about1.php";
    if (path) {$('li a[href$="' + path + '"]:first').attr('class', 'current');}
    var crumbs = $(".current").parents("ul")
        .prev("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>";    
        return bc; 
    }).get().join(" > ");
    $("#breadcrumbs").html("You Are Here: "+crumbs);
});