Breadcrumb libraries (html5/css) [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I am looking for a library which has some custom breadcrumbs as the following:
Any idea what I could use to have a result looking as my image (ish).

Answer 1

You can create fast in css like this:
No need library, just adapt my snippet for you with your styles and icons
$('.breadcrumb__item').click(function(){
$('.breadcrumb__item').removeClass('active');
$(this).addClass('active');
});
.breadcrumb{
width: 80%;
margin: 20px auto;
padding: 0;
position: relative;
list-style: none;
display: flex;
justify-content: space-between;
overflow-x: hidden;
}
.breadcrumb::after{
position: absolute;
height: 2px;
width: 100%;
background: blue;
left: 0;
top: 50%;
transform: translateY(-50%);
content:'';
}
.breadcrumb__item{
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 2px solid blue;
border-radius: 50%;
display: block;
background: grey;
position: relative;
z-index: 1;
cursor: pointer;
}
.breadcrumb__item span{
display: block;
height: 100%;
width: 100%;
position: relative;
z-index: 3;
background: blue;
border-radius: 50%;
}
.breadcrumb__item.active span{
background: #fff;
}
.breadcrumb__item.active ~ .breadcrumb__item{
border-color: grey;
}
.breadcrumb__item.active ~ .breadcrumb__item span{
display: none;
}
.breadcrumb__item.active::after{
position: absolute;
height: 2px;
width: 999999%;
background: grey;
left: 0;
top: 50%;
transform: translateY(-50%);
content:'';
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="breadcrumb">
<li class="breadcrumb__item">
<span>1</span>
</li>
<li class="breadcrumb__item active">
<span>2</span>
</li>
<li class="breadcrumb__item">
<span>3</span>
</li>
<li class="breadcrumb__item">
<span>4</span>
</li>
</ul>