JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://kit.fontawesome.com/97446b8f60.js"></script>
<div class="secondary">
    <div id="menu-breadcrumb"></div>
    <ul id="menu-inner-page-menu" class="menu">
        <li>Home</li>
        <li id="menu-item-204" class="menu-item-has-children"><a href="#">Demo1</a>
            <ul class="sub-menu">
                <li id="menu-item-304" class="menu-item-has-children"><a href="#">Demo 1.1</a>
                    <ul class="sub-menu">
                        <li><a href="">Demo 1.1.1</a></li>
                        <li><a href="">Demo 1.1.2</a></li>
                        <li><a href="">Demo 1.1.2</a></li>
                    </ul>

                </li>
                <li id="menu-item-305"><a href="">Demo 1.2</a></li>
                <li id="menu-item-306"><a href="">Demo 1.3</a></li>
                <li id="menu-item-307"><a href="">Demo 1.4</a></li>
            </ul>
        </li>

        <li id="menu-item-205" class="menu-item-has-children"><a href="#">Demo2</a>
            <ul class="sub-menu">
                <li id="menu-item-315"><a href="">Demo 2.1</a></li>
                <li id="menu-item-316"><a href="">Demo 2.2</a></li>
            </ul>
        </li>

    </ul>
</div>

CSS

ul {
  padding-left: 0;
}

.secondary {
  z-index: 99;
  background: #f8f8f8;
  -webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  -webkit-transition: left 0.2s ease, width 0.2s ease;
  transition: left 0.2s ease, width 0.2s ease;
  border-right: 1px solid #eaedf1;
  position: fixed;
  top: 0;
  height: 100%;
  padding: 12px;
  width: 320px;
}

.menu li {
  padding-bottom: 10px;
  padding-left: 23px;
  list-style: none;
}

.menu-item-has-children>a {
  position: relative;
  display: block;
}

.menu-item-has-children .sub-menu {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  background: #f8f8f8;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: left .3s;
  z-index: 10;
}
/* select only first child li that has sub menu to top 40 */
.menu > li.menu-item-has-children > .sub-menu {
    top: 40px;
}

.menu-item-has-children>a::after {
  display: inline-block;
  vertical-align: middle;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  position: absolute;
  right: 05px;
  top: 0px;
  font-size: 12px;
}

/* below is style for menu breadcrumb */
.mbc-link-back {
    color: #0066cc;
    text-decoration: none;
}

#menu-breadcrumb a + a::before {
    color: #222;
    content: '>';
    cursor: default;
    padding: 0 3px;
}

JavaScript

$('.menu-item-has-children .sub-menu').css({
    'left': '-320px'
});

var menuBreadcrumb = document.getElementById('menu-breadcrumb');

$('.menu-item-has-children > a').click(function() {
    //alert('hello');

    var thismenuLi = $(this).parent().attr('id');
    let thismenuText = $(this).text();
    let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="' + thismenuLi + '">' + thismenuText + '</a>'
    menuBreadcrumb.insertAdjacentHTML('beforeend', mbcElement);
    //console.log(thismenuLi); 
    $('.menu-item-has-children[id=' + thismenuLi + '] > .sub-menu').css({
        'left': '0px'
    });

});


// use event delegation to listen click on menu breadcrumb and go back.
$('body').on('click', '.mbc-link-back', function(e) {
    e.preventDefault();
    // in case user click on the item before last, go back all until the end.
    $(this).nextAll().each(function(index) {
    	mbcGoBack($(this));
    });
    mbcGoBack($(this));
});
function mbcGoBack(jQThis) {
	let menuLiId = jQThis.data('menuItemId');
    $('.menu-item-has-children[id=' + menuLiId + '] > .sub-menu').css({
    	'left': '-320px'// must match from the beginning.
    });
    jQThis.remove();
}