<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="container"> <div class="breadcrumb"> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Website Root</span> <span class="breadcrumb__desc">First Item</span> </span> </a> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Page Depth 02</span> <span class="breadcrumb__desc">Second Item</span> </span> </a> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Page Depth 03</span> <span class="breadcrumb__desc">Third Item</span> </span> </a> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Page Depth 04</span> <span class="breadcrumb__desc">Fourth Item</span> <span class="breadcrumb__desc">With Additional Line</span> </span> </a> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Page Depth 05</span> </span> </a> </div> </div>

$base: 38px; * {margin: 0; padding: 0; box-sizing: border-box} html, body { height: 100%; background-color: #333; } .container { display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 480px; padding: 0 40px; } .breadcrumb { display: flex; border-radius: 6px; overflow: hidden; margin: auto; text-align: center; top: 50%; width: 100%; height: $base * 1.5; transform: translateY(-50%); box-shadow: 0 1px 1px rgba(0,0,0,1), 0 4px 14px rgba(0,0,0,0.7); z-index: 1; background-color: #ddd; font-size: 14px; } .breadcrumb a { position: relative; display: flex; flex-grow: 1; text-decoration: none; margin: auto; height: 100%; padding-left: $base; padding-right: 0; color: #666; } .breadcrumb a:first-child { padding-left: $base / 2.5; } .breadcrumb a:last-child { padding-right: $base / 2.5; } .breadcrumb a:after { content: ""; position: absolute; display: inline-block; width: $base * 1.5; height: $base * 1.5; top: 0; right: $base / 1.35 * -1; background-color: #ddd; border-top-right-radius: 5px; transform: scale(0.707) rotate(45deg); box-shadow: 1px -1px rgba(0,0,0,0.25); z-index: 1; } .breadcrumb a:last-child:after { content: none; } .breadcrumb__inner { display: flex; flex-direction: column; margin: auto; z-index: 2; } .breadcrumb__title { font-weight: bold; } .breadcrumb a.active, .breadcrumb a:hover{ background: darken(tomato, 20%); color: white; } .breadcrumb a.active:after, .breadcrumb a:hover:after { background: darken(tomato, 20%); color: white; } // 1000px /////////////////////// @media all and (max-width: 1000px) { .breadcrumb { font-size: 12px; } } // 710px /////////////////////// @media all and (max-width: 710px) { .breadcrumb__desc { display: none; } .breadcrumb { height: $base; } .breadcrumb a { padding-left: $base / 1.5; } .breadcrumb a:after { content: ""; width: $base * 1; height: $base * 1; right: $base / 2 * -1; transform: scale(0.707) rotate(45deg); } }