<div class="container py-5">
  <p class="text-muted small mb-3">Click "+ Add level" a few times to grow the trail past 4 segments and watch the middle ones collapse into a "…" dropdown.</p>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb bsbc-trail" id="bsbcTrail">
      <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
      <li class="breadcrumb-item"><a href="javascript:void(0)">Docs</a></li>
      <li class="breadcrumb-item"><a href="javascript:void(0)">Guides</a></li>
      <li class="breadcrumb-item active" aria-current="page">Getting Started</li>
    </ol>
  </nav>
  <button class="btn btn-sm btn-outline-dark" id="bsbcAdd">+ Add level</button>
  <button class="btn btn-sm btn-outline-secondary" id="bsbcReset">Reset</button>
</div>

.bsbc-trail { background: #f6f7f9; border-radius: 8px; padding: 10px 16px; align-items: center; }
.bsbc-trail .breadcrumb-item + .breadcrumb-item::before { content: "›"; }
.bsbc-overflow .dropdown-toggle {
  background: none; border: none; color: #6b7280; font-weight: 700; padding: 0 4px; cursor: pointer;
}
.bsbc-overflow .dropdown-menu { min-width: 160px; }

const trail = document.getElementById('bsbcTrail');
const addBtn = document.getElementById('bsbcAdd');
const resetBtn = document.getElementById('bsbcReset');
let n = 0;

function segments() {
  return Array.from(trail.children).filter(li => !li.classList.contains('bsbc-overflow'));
}

// Collapses every middle segment (all but the first "Home" and the last two)
// into one "…" dropdown once the trail has more than 4 real segments — the
// standard breadcrumb-overflow pattern, rebuilt from scratch on every change
// so it always reflects exactly what's currently in the trail.
function render() {
  const segs = segments();
  trail.querySelectorAll('.bsbc-overflow').forEach(el => el.remove());

  if (segs.length <= 4) {
    segs.forEach(li => li.style.display = '');
    return;
  }

  const first = segs[0];
  const lastTwo = segs.slice(-2);
  const hidden = segs.slice(1, -2);

  segs.forEach(li => li.style.display = 'none');
  first.style.display = '';
  lastTwo.forEach(li => li.style.display = '');

  const overflowLi = document.createElement('li');
  overflowLi.className = 'breadcrumb-item bsbc-overflow dropdown';
  overflowLi.innerHTML =
    '<a class="dropdown-toggle" href="javascript:void(0)" data-bs-toggle="dropdown">…</a>' +
    '<ul class="dropdown-menu">' +
    hidden.map(li => '<li><a class="dropdown-item" href="javascript:void(0)">' + li.textContent + '</a></li>').join('') +
    '</ul>';
  first.after(overflowLi);
}

addBtn.addEventListener('click', () => {
  n++;
  const active = trail.querySelector('.active');
  active.classList.remove('active');
  active.removeAttribute('aria-current');
  const link = document.createElement('a');
  link.href = 'javascript:void(0)';
  const oldLi = active.cloneNode(false);
  oldLi.appendChild(link.cloneNode());
  link.textContent = active.textContent;
  active.innerHTML = '';
  active.appendChild(link);

  const newLi = document.createElement('li');
  newLi.className = 'breadcrumb-item active';
  newLi.setAttribute('aria-current', 'page');
  newLi.textContent = 'Level ' + n;
  trail.appendChild(newLi);
  render();
});

resetBtn.addEventListener('click', () => {
  n = 0;
  trail.innerHTML =
    '<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>' +
    '<li class="breadcrumb-item"><a href="javascript:void(0)">Docs</a></li>' +
    '<li class="breadcrumb-item"><a href="javascript:void(0)">Guides</a></li>' +
    '<li class="breadcrumb-item active" aria-current="page">Getting Started</li>';
  render();
});