Navigation

Scrollspy

The .quanta-scrollspy-nav creates a sticky horizontal navigation that highlights links based on the visible section in view. Use it for landing pages, long forms, or documentation.

HTML Setup

Wrap anchor links in .quanta-scrollspy-nav, and target IDs on section blocks with .quanta-scrollspy-section:

<nav class="quanta-scrollspy-nav">
  <a href="#section1" class="quanta-scrollspy-link">Section 1</a>
  <a href="#section2" class="quanta-scrollspy-link">Section 2</a>
  <a href="#section3" class="quanta-scrollspy-link">Section 3</a>
</nav>

<section id="section1" class="quanta-scrollspy-section">...</section>
<section id="section2" class="quanta-scrollspy-section">...</section>
<section id="section3" class="quanta-scrollspy-section">...</section>

JavaScript Activation

This script watches which section is in view and applies the .active class to its matching nav link:

const sections = document.querySelectorAll('.quanta-scrollspy-section');
const navLinks = document.querySelectorAll('.quanta-scrollspy-link');

window.addEventListener('scroll', () => {
  let current = '';
  sections.forEach(section => {
    const sectionTop = section.offsetTop - 80; // adjust based on sticky nav height
    if (window.scrollY >= sectionTop) {
      current = section.getAttribute('id');
    }
  });

  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === '#' + current) {
      link.classList.add('active');
    }
  });
});

Dark Mode

Text and border colors adjust automatically in dark theme. You can tweak --quanta-bg-default, --quanta-border-color, and --quanta-text-muted tokens as needed.