<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="breadcrumb-wrap"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li><a href="#">Sub-Category</a></li> <li class="active">Product Name</li> </ul> </div> </div> </div> </div> http://www.jqueryscript.net/menu/jQuery-Plugin-To-Create-Fully-Responsive-Breadcrumbs-asBreadcrumbs.html https://github.com/amazingSurge/jquery-asBreadcrumbs http://www.jqueryscript.net/menu/Space-saving-Stackable-Horizontal-Navigation-Plugin-stackable.html

.breadcrumb-wrap { padding: 12px 0; background-color: #f5f5f5; margin-bottom: 15px; line-height: 100%; } .breadcrumb { padding: 0; margin-bottom: 0; list-style: none; background-color: transparent; border-radius: 0; } .breadcrumb > li { display: inline-block; font-size: 12px; } .breadcrumb > li a { text-decoration: none; font-weight: 600; color: #666; } .breadcrumb > li a:hover { color: #db6460; } .breadcrumb .is-hidden { display: none; } .breadcrumb-ellipsis { display: inline-block; } .breadcrumb-dropdown { display: inline-block; } .dropdown-menu { min-width: auto; margin: 6px 0 0; border-radius: 0; } .dropdown-menu li a { font-size: 12px; } .breadcrumb > li.breadcrumb-ellipsis.is-hidden + li:before { display: none; } .breadcrumb-toggle { margin-right: 5px;

jQuery(function($) { $('.breadcrumb').asBreadcrumbs({ namespace: 'breadcrumb' }); $(".destroy-btn").on("click", function() { $(".breadcrumb").asBreadcrumbs("destroy"); }) $(".init-btn").on("click", function() { $(".breadcrumb").asBreadcrumbs({ namespace: 'breadcrumb' }); }) });