Breadcrumb

A breadcrumb is a series of links that lays out the hierarchical relationship between the current page and the overall site or app structure. Breadcrumbs provide secondary navigation that allows users to move freely through a series of pages and leap backward or forward more than one page at a time. They facilitate users being able to orient themselves within the breadth of an app or website.

Usage

Breadcrumbs are essential navigation elements; every website should have one.

Example

Example of a breadcrumb path
<style type="text/css">
.breadcrumbs {
  background: #f6f6f8;
  color: #717171;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.breadcrumb {
  background: none;
  display: flex;
  font-size: 14px;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li {
  margin-inline-start: -30px;
  overflow: hidden;
  position: relative;
}
.breadcrumb li:nth-child(1) {
  margin-inline-start: 15px;
  overflow: visible;
  z-index: 9;
}
.breadcrumb li:nth-child(2){
  z-index: 8;
}
.breadcrumb li:nth-child(3){
  z-index: 7;
}
.breadcrumb li:nth-child(4){
  z-index: 6;
}
.breadcrumb li:nth-child(5){
  z-index: 5;
}
.breadcrumb li:nth-child(6){
  z-index: 4;
}
.breadcrumb li:nth-child(7){
  z-index: 3;
}
.breadcrumb li:nth-child(8){
  z-index: 2;
}
.breadcrumb li:nth-child(9){
  z-index: 1;
}
.breadcrumb li:last-child {
  overflow: hidden;
  margin-inline-start: -30px;
}
.breadcrumb>li::before {
    width: 0;
    height: 0;
    content: '';
    z-index: 2;
    border-left: 1em solid #DBDCE0;
    border-bottom: 1em solid transparent;
    border-top: 1em solid transparent;
    font-size: 2000px;
    margin-bottom: -2000px;
    margin-top: -2000px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 2;
}
.breadcrumb>li::after {
    width: 0;
    height: 0;
    content: '';
    z-index: 2;
    border-left: 1em solid #FFF;
    border-bottom: 1em solid transparent;
    border-top: 1em solid transparent;
    font-size: 2000px;
    margin-bottom: -2000px;
    margin-top: -2000px;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 50%;
    z-index: 1;
}
.breadcrumb li:last-child:before,
.breadcrumb li:last-child:after {
  content: none;
}
.breadcrumb a {
  color: #2c6bac;
}
.breadcrumb a,
.breadcrumb span {
  display: block;
  overflow: hidden;
  padding: 12px 50px 12px 40px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

</style>
<nav class="breadcrumbs" aria-label="breadcrumb">
<ol class="breadcrumb">
	<li class="breadcrumb-item">
    <a href="#">Home</a>
      
    </li>
	<li class="breadcrumb-item">
    <a href="#">Link Name</a>
      
    </li>
	<li class="breadcrumb-item"><a href="#">Link Name</a></li>
	<li aria-current="page" class="breadcrumb-item active"><span class="current">Current Page Name</span></li>
</ol>
</nav>