Floating Pill Nav — Free HTML CSS JS Navbar Snippet

<div class="fp-page">
  <nav class="fp-nav" id="fpNav" aria-label="Primary">
    <a href="#" class="fp-brand">◆ Lumen</a>
    <ul class="fp-links" id="fpLinks">
      <li><a href="#home" class="fp-link active">Home</a></li>
      <li><a href="#features" class="fp-link">Features</a></li>
      <li><a href="#pricing" class="fp-link">Pricing</a></li>
      <li><a href="#docs" class="fp-link">Docs</a></li>
    </ul>
    <a href="#" class="fp-cta">Sign up</a>
  </nav>

  <header class="fp-hero"><h1>Scroll down</h1><p>The pill nav shrinks and lifts as you go.</p></header>
  <section class="fp-fill"></section>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b1120;color:#e2e8f0}

.fp-page{min-height:200vh}

.fp-nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;width:min(720px,calc(100% - 32px));padding:13px 13px 13px 22px;background:rgba(17,24,39,.55);border:1px solid rgba(148,163,184,.16);border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px -12px rgba(0,0,0,.5);transition:width .35s cubic-bezier(.4,0,.2,1),top .35s,padding .35s,background .35s,box-shadow .35s;z-index:50}
.fp-nav.shrink{width:min(560px,calc(100% - 32px));top:12px;padding:9px 9px 9px 18px;background:rgba(17,24,39,.82);box-shadow:0 12px 34px -10px rgba(0,0,0,.7)}

.fp-brand{font-weight:800;font-size:15px;color:#fff;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.fp-brand{color:#a78bfa}

.fp-links{list-style:none;display:flex;gap:4px;margin:0 auto;position:relative}
.fp-link{position:relative;display:block;padding:7px 14px;font-size:13.5px;font-weight:600;color:#94a3b8;text-decoration:none;border-radius:999px;transition:color .2s;z-index:1}
.fp-link:hover{color:#e2e8f0}
.fp-link.active{color:#fff}
.fp-pill{position:absolute;top:0;height:100%;border-radius:999px;background:rgba(167,139,250,.18);border:1px solid rgba(167,139,250,.4);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s;z-index:0}

.fp-cta{background:#a78bfa;color:#1e1b4b;font-size:13px;font-weight:800;text-decoration:none;padding:9px 17px;border-radius:999px;white-space:nowrap;transition:transform .15s}
.fp-cta:hover{transform:translateY(-1px)}

.fp-hero{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.fp-hero h1{font-size:clamp(32px,7vw,64px);font-weight:800;background:linear-gradient(120deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.fp-hero p{color:#64748b}
.fp-fill{height:100vh;background:radial-gradient(circle at 50% 0,rgba(167,139,250,.08),transparent 60%)}

@media(max-width:560px){.fp-links{display:none}}

var nav = document.getElementById('fpNav');
var linksWrap = document.getElementById('fpLinks');
var links = Array.prototype.slice.call(linksWrap.querySelectorAll('.fp-link'));

// 1) Sliding pill indicator that follows the active/hovered link.
var pill = document.createElement('span');
pill.className = 'fp-pill';
linksWrap.appendChild(pill);

function movePill(el) {
  pill.style.width = el.offsetWidth + 'px';
  pill.style.transform = 'translateX(' + el.offsetLeft + 'px)';
}
function activeEl() { return linksWrap.querySelector('.fp-link.active'); }

requestAnimationFrame(function () { movePill(activeEl()); });

links.forEach(function (link) {
  link.addEventListener('mouseenter', function () { movePill(link); });
  link.addEventListener('click', function (e) {
    e.preventDefault();
    links.forEach(function (l) { l.classList.remove('active'); });
    link.classList.add('active');
    movePill(link);
  });
});
linksWrap.addEventListener('mouseleave', function () { movePill(activeEl()); });
window.addEventListener('resize', function () { movePill(activeEl()); });

// 2) Condense the whole bar after a small scroll using a passive listener.
var ticking = false;
window.addEventListener('scroll', function () {
  if (ticking) return;
  ticking = true;
  requestAnimationFrame(function () {
    nav.classList.toggle('shrink', window.scrollY > 40);
    ticking = false;
  });
}, { passive: true });