Breadcrumbs

by chrischilcoat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<br/>
<br/>
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#"><span class="fa fa-folder"></span> Germany</a></li>
          
          <li class="breadcrumb-item" style="display:none;" data-toggle="tooltip" data-placement="top" title="View Folders" data-delay='{"show":"300", "hide":"0"}'>
            <a href="#" class="dropdown-toggle" role="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="fa fa-ellipsis-h"></span></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            
            </div>
          </li>
          
          <li class="breadcrumb-item proto-one">
            <a href="#">One</a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            </div>
          </li>
          <li class="breadcrumb-item"><a href="#">Two</a></li>
          <li class="breadcrumb-item"><a href="#">Three</a></li>
          
          <li class="breadcrumb-item"><a href="#">Four</a></li>
          

          
          <li class="breadcrumb-item active">Five</li>
        </ol>
      </nav>
    </div>
  </div>
</div>


<p>Reisize screen to see responsive breadcrumbs.<br/> Right click elements to see contextual menu.</p>










<p>
Small Screens
</p>
<div class="container-fluid">
  <div...

SCSS

.row {
  margin: 20px;
}

.col {
  .breadcrumb {
    margin:0 -15px;
    border-radius:0;
    //background:green;
    .breadcrumb-item {
       white-space: nowrap; 
       overflow: hidden;
       text-overflow: ellipsis;
       max-width:150px;
       //background:red;
       .dropdown-toggle::after {
         display:none;
       }
    }
    .fa-stack {
      line-height: 1.4;
      height: 1.4em;
      .fa:first-child {
        font-size: 1.4em;
        line-height: .9em;
      }
      .fa:last-child {
        font-size: 72%;
        line-height: 2em;
      }
    }
    .breadcrumb-item:nth-child(even) {
      //background:pink;
    }
  }
}

p {
  margin: 0 40px 20px;
}

JavaScript

(function($) {
  'use strict';

  $.fn.extend({
    responsiveBreadcrumb: function(options) {
      var options = $.extend({
          width: '730',
					url: ''
        },
        options
      );

      return this.each(function() {
        var $this = $(this),
            $window = $(window),
            $widthOfLastItemMoved = 0,
            $textOfLastItemMoved = '',
            $itemsMoved = 0,
            $itemsWidth = 0,
            $itemsWidthArray = [],
            $itemsTextArray = [],
            $wrapper = $this,
            $items = $this.find('.breadcrumb-item'),
            $ellipsis = '<li class="breadcrumb-item">'+
                        ' <a href="#" class="dropdown-toggle" role="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-ellipsis-h"></span></a>'+
                        ' <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">'+
                        ' </div>'+
                        '</li>',          
            setup = function() {
              makeArrays();
              update();  
            },
            makeArrays = function() {
              
            },
            getWrapperWidth = function() {
              var $x = $this.width();
              return $x;
            },
            getItemsWidth = function() {
              var $x = 0;   
              $items.each(function( index ) {
                var $y = Math.round($(this).outerWidth());
                $x = $x + $y;
              });
              return $x;
            },
            makeDropdownItem = function(x) {
                  
              console.log('makeDropdownItem');
              
              $widthOfLastItemMoved = Math.round($this.find('.breadcrumb-item:nth-child(3)').outerWidth());
              $itemsWidthArray.push($widthOfLastItemMoved);
              
              $textOfLastItemMoved = $this.find('.breadcrumb-item:nth-child(3)').text();
              
       ...