JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="container">
            <div class="row">
                <ul class="breadcrumb">
                    <li class="bread-li"><a href="#">Inicio</a></li>
                    <li class="bread-li"><a href="#">Noticias</a></li>
                    <li class="bread-li dropdown mega-dropdown ">
                        <a href="#" class="caret-link dropdown-toggle Negrito" data-toggle="dropdown">Serviços <span class="caret"></span>
                        </a>        
                        <div class="dropdown-menu mega-dropdown-menu">
                            <div class="widget-box">
                                <div class="widget-title">
                                    <ul class="nav nav-tabs nav-tabs-carousel">
                                        <li class="active"><a data-toggle="tab" href="#tab1">Serviço 1</a></li>
                                        <li><a data-toggle="tab" href="#tab2">Serviço 2</a></li>
                                        <li><a data-toggle="tab" href="#tab3">Serviço 3</a></li>
                                        <li><a data-toggle="tab" href="#tab4">Serviço 4</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

CSS

.breadcrumb {
    padding: 0px;
    background: #D4D4D4;
    list-style: none;
    margin-top: 20px;
    display: block;
    overflow:hidden;
}
.breadcrumb > li + li:before {
    padding: 0;
}
.breadcrumb > li {
    float: left; 
}
.breadcrumb > li.active > a {
    background: brown;                   
    background: #ffc107 ; 
}
.breadcrumb > li.completed > a {
    background: brown;                   
    background: hsla(153, 57%, 51%, 1); 
}
.breadcrumb > li.active > a:after {
    border-left: 30px solid #ffc107 ;
}
.breadcrumb > li.completed > a:after {
    border-left: 30px solid hsla(153, 57%, 51%, 1);
} 

.breadcrumb > li > a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 45px;
    position: relative; 
    display: block;
    float: left;
}
.breadcrumb > li > a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(0, 0%, 83%, 1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
} 
.breadcrumb > li > a:before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;    
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    margin-left: 1px;
    left: 100%;
    z-index: 1; 
} 
.breadcrumb > li:first-child > a {
    padding-left: 15px;
}
.breadcrumb > li > a:hover { 
    background: #ffc107  ; 
}
.breadcrumb > li > a:hover:after { 
    border-left-color: #ffc107   !important; 
}
.breadcrumb > li.dropdown {
    position: static;
}

JavaScript

$(function() {
    $('.breadcrumb .dropdown').on({'click': function(event) {
        if ($(event.target).closest('.dropdown-toggle').length) {
            $(this).data('closable', true);
        } else {
            $(this).data('closable', false);
        }
    },
        'hide.bs.dropdown': function(event) {
            hide = $(this).data('closable');
            $(this).data('closable', true);
            return hide;
        }
    });
});