面包屑库（html5 / css）

Question

我正在寻找一个有一些自定义面包屑的库，如下所示：

知道我可以使用什么来将结果看作我的图像（ish）。

Answer 1

你可以像这样在css中快速创建：

不需要库，只需使用您的样式和图标调整我的代码段

＆＃13;

＆＃13;

$('.breadcrumb__item').click(function(){
  $('.breadcrumb__item').removeClass('active');
  $(this).addClass('active');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;