<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="dark placeholder">
<div class="breadcrumb">
<a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a>
</div>
<p></p>
<div class="breadcrumb">
<a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a><input type="text" placeholder="Search…">
</div>
</div>
<div class="light placeholder">
<div class="breadcrumb">
<a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a>
</div>
<p></p>
<div class="breadcrumb">
<a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a><a href="#"Five</a><input type="text" placeholder="Search…">
</div>
</div>
.breadcrumb,
.breadcrumb a {
height: 33px;
display: inline-block;
}
.breadcrumb {
margin: 0;
padding: 0;
border-radius: 3px;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
.breadcrumb a {
text-rendering: optimizeLegibility;
line-height: 33px;
font-size: 12px;
font-weight: 300;
text-decoration: none;
padding: 0 10px 0 20px;
position: relative;
}
.breadcrumb a:first-child {
padding-left: 16px;
}
.breadcrumb a:last-child,
.breadcrumb input[type=text] {
padding-right: 16px;
}
.breadcrumb a:after,
.breadcrumb a:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
/* make left half the height */
border-left: 10px solid transparent;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 100%;
z-index: 2;
}
.breadcrumb a:before {
margin-left: 1px;
z-index: 1;
}
.breadcrumb a:last-child {
color: #fff;
}
.breadcrumb a:last-child {
pointer-events: none;
cursor: default;
}
.breadcrumb a:last-child:after,
.breadcrumb a:last-child:before,
.breadcrumb input[type=text] {
border: none;
}
.breadcrumb input[type=text] {
-webkit-appearance: none;
display: inline-block;
text-indent: 24px;
padding: 0 16px;
height: 33px;
width: 10px;
outline: 1px solid transparent;
background-origin: content-box;
background-position: left 50%;
background-repeat: no-repeat;
background-size: 15px 15px;
transition-property: all;
transition-duration: .13s;
transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.breadcrumb input[type=text]:hover,
.breadcrumb input[type=text]:focus {
width: 100px;
}
/* DARK COLORS */
.dark .breadcrumb {
border-color: #2E3031;
}
.dark .breadcrumb a {
color: #c6c6c6;
background-color: #595B5B;
text-shadow: 0 -1px rgba(0,0,0,.7);
box-shadow: inset 0 1px 0 #727373;
}
.dark .breadcrumb a:after {
border-left-color: #595B5B;
}
.dark .breadcrumb a:before {
border-left-color: #2E3031;
}
.dark .breadcrumb a:hover {
background: #646666;
}
.dark .breadcrumb a:hover:after {
border-left-color: #646666;
}
.dark .breadcrumb a:active:before {
border-left-color: #404141;
}
.dark .breadcrumb a:last-child,
.dark .breadcrumb input[type=text] {
background-color: #404141;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.dark .breadcrumb input[type=text] {
color: #c6c6c6;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49364/search-light.svg);
}
/* LIGHT COLORS */
.light .breadcrumb {
border-color: #9C9E9E;
}
.light .breadcrumb a {
color: #454545;
background-color: #e5e9e9;
text-shadow: 0 -1px rgba(255,255,255,.7);
box-shadow: inset 0 1px 0 #fff;
}
.light .breadcrumb a:after {
border-left-color: #e5e9e9;
}
.light .breadcrumb a:before {
border-left-color: #9C9E9E;
}
.light .breadcrumb a:hover {
background: #EDF1F1;
}
.light .breadcrumb a:hover:after {
border-left-color: #EDF1F1;
}
.light .breadcrumb a:last-child,
.light .breadcrumb input[type=text] {
background-color: #d3d7d7;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.light .breadcrumb input[type=text] {
color: #454545;
background-color: #D3D7D7;
border: 0;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49364/search-dark.svg);
}
.breadcrumb input[type=text]:focus {
outline-color: #0026FF;
background-color: #fff;
box-shadow:
inset 0 0 0 2px #6CB4F3,
inset 0 1px 2px rgba(0,0,0,.4);
}
