JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="menubar">
<ul class="breadcrumbs">
<li><a href="/">Home</a></li>
<li><a href="/foo">Foo</a></li>
<li><a href="/bar" >Bar</a></li>
<li><a href="/baz" >Baz</a></li>
</ul>
</div>
</body>

CSS

ul {
    display: inline;
    list-style: none;
}
li {
    float: left;
    display: inline;
    background-color: #CCCCCC;
}
li:after {
    content: '>';
}
a {
    padding: 4px 8px;
}

JavaScript

$(function(){
    $("#menubar").children(".breadcrumbs").children("li + li").hide();
    
    $("#menubar .breadcrumbs").hover(function() {
        $(this).children("li + li").stop().show("slide", {}, 'slow');
    }, function() {
        $(this).children("li + li").stop().hide("slide", {}, 'slow');
    });
});