<nav class="navbar navbar-expand-lg bsnav-bar sticky-top">
  <div class="container-fluid px-3 px-lg-4">
    <a class="navbar-brand fw-bold" href="javascript:void(0)">
      <span class="bsnav-dot"></span>Northwind
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bsnavCollapse" aria-controls="bsnavCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="bsnavCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 bsnav-links" id="bsnavLinks">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)" data-label="Product">Product</a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)" data-label="Pricing">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)" data-label="Docs">Docs</a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)" data-label="Changelog">Changelog</a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)" data-label="Support">Support</a></li>
      </ul>
      <div class="d-flex align-items-center gap-2">
        <div class="bsnav-search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="text" id="bsnavSearchInput" class="form-control form-control-sm" placeholder="Search nav links…" autocomplete="off">
        </div>
        <button class="btn btn-primary btn-sm" type="button">Sign in</button>
      </div>
    </div>
  </div>
</nav>

<main class="bsnav-stage">
  <p class="bsnav-hint">Type in the search box above — matching links stay full-opacity while the rest dim, so you can scan the nav for what's relevant. Resize the preview narrow (or the panel below 992px) to see the real Bootstrap hamburger collapse take over.</p>
  <p class="bsnav-hint" id="bsnavClickReadout">Clicked: <strong>none yet</strong></p>
</main>

body { background: #f6f7f9; }

.bsnav-bar {
  background: #fff;
  border-bottom: 1px solid #e3e5ea;
  padding-block: 10px;
}

.bsnav-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6366f1;
  margin-right: 7px;
}

.bsnav-links .nav-link {
  color: #4b5563;
  font-weight: 500;
  font-size: 14.5px;
  transition: opacity .15s, color .15s;
}
.bsnav-links .nav-link.active { color: #6366f1; font-weight: 700; }

/* Dimmed rather than removed on a non-match — keeps the nav's width stable
   while still making the match obvious at a glance. */
.bsnav-links .nav-item.bsnav-dim .nav-link { opacity: .3; }

.bsnav-search {
  position: relative;
  display: flex;
  align-items: center;
}
.bsnav-search svg {
  position: absolute;
  left: 10px;
  color: #9ca3af;
  pointer-events: none;
}
.bsnav-search input {
  padding-left: 30px;
  width: 190px;
}

.bsnav-stage {
  padding: 40px 24px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.bsnav-hint {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}
.bsnav-hint strong { color: #6366f1; }

const searchInput = document.getElementById('bsnavSearchInput');
const navLinks = document.getElementById('bsnavLinks');
const clickReadout = document.getElementById('bsnavClickReadout');

searchInput.addEventListener('input', () => {
  const q = searchInput.value.trim().toLowerCase();
  navLinks.querySelectorAll('.nav-item').forEach(item => {
    const label = item.querySelector('.nav-link').dataset.label.toLowerCase();
    const isMatch = !q || label.includes(q);
    item.classList.toggle('bsnav-dim', !isMatch);
  });
});

// Real click handling — not the styling this snippet is about, but proof the
// nav links are wired to something rather than being static placeholders.
navLinks.addEventListener('click', e => {
  const link = e.target.closest('.nav-link');
  if (!link) return;
  e.preventDefault();
  navLinks.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
  link.classList.add('active');
  clickReadout.innerHTML = 'Clicked: <strong>' + link.dataset.label + '</strong>';
});