Nav bar

Two floating glass pills — logo left, links right. The nav hovers over the page without a solid background, using backdrop-filter blur to stay legible over any content. The wordmark swaps color when scrolling over dark sections. This is the production landing nav, faithfully reproduced.

Variants

Structure

States

On dark surfaces

Anatomy

Usage

Accessibility

Code

HTML

<nav class="nav" aria-label="Main navigation">
  <div class="nav-row">
    <a href="/" class="nav-logo-pill" aria-label="Settld home">
      <span class="nav-wordmark" aria-hidden="true">settld</span>
    </a>
    <div class="nav-links-pill">
      <a href="#features" class="nav-link">Features</a>
      <a href="#pricing" class="nav-link">Pricing</a>
      <a href="#waitlist" class="nav-link cta">Join waitlist →</a>
    </div>
  </div>
</nav>

JavaScript — scroll + dark-section detection

const nav = document.querySelector('.nav');

// Scroll: strengthen glass after 8px
window.addEventListener('scroll', () => {
  nav.classList.toggle('scrolled', window.scrollY > 8);
}, { passive: true });

// Dark sections: swap wordmark color
const darkSections = document.querySelectorAll('[data-dark-section]');
const observer = new IntersectionObserver(entries => {
  const anyDark = entries.some(e => e.isIntersecting);
  nav.classList.toggle('over-dark', anyDark);
}, { rootMargin: '-64px 0px 0px 0px', threshold: 0 });
darkSections.forEach(s => observer.observe(s));

CSS classes

Design tokens used