Single-Page Anchor Link Navbar Template

A smart navigation bar specifically designed for single-page websites.

This type of navigation is essential for landing pages, product showcases, or any single-page website. The key is creating a smooth scrolling experience and providing clear visual feedback to the user, showing which section they are currently viewing.

Screenshot of the top nav and main nav combo template

Get Source Code → Preview →

The Single-Page Anchor Link Navbar

A smart navigation bar specifically designed for single-page websites. Instead of linking to other pages, the links smoothly scroll the user to different sections on the current page. The navbar also intelligently highlights the link corresponding to the section currently visible in the viewport.

Smooth Scrolling — Built with pure CSS using scroll-behavior: smooth. Clicking a link in the navbar gracefully animates the scroll to the target section without requiring any JavaScript libraries.
Active Link Highlighting on Scroll — JavaScript observes which page section is currently visible and automatically applies an "active" style to the corresponding link in the navbar. This provides clear, real-time feedback to the user about their location on the page.
Performant Intersection Observer API — The active link highlighting is achieved using the modern and highly performant IntersectionObserver API, which is much more efficient than traditional scroll event listeners for this task.
Clean and Responsive: The navbar is fully responsive, collapsing into a standard hamburger menu on mobile devices while maintaining all of its single-page functionality.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is appropriately commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (arguably superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Single-Page Anchor Link Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Landing Page Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #333;
            --color-text-secondary: #555;
            --color-primary: #6c5ce7;
            --color-primary-dark: #5a4cc1;
            --color-border: #eeeeee;
            
            --font-family-sans-serif: "Montserrat", -apple-system, sans-serif;
            --navbar-height: 70px;
            --transition-speed: 0.2s;
        }

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
        
        /*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        
        html {
            /* This is the key for smooth scrolling */
            scroll-behavior: smooth;
            /* Add padding to the top to offset the sticky navbar height */
            scroll-padding-top: var(--navbar-height);
        }

body { margin: 0; font-family: var(--font-family-sans-serif); }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; }
        
        .page-section {
            min-height: 100vh;
            display: flex; flex-direction: column; justify-content: center;
            align-items: center; text-align: center;
            padding: 2rem; border-bottom: 1px solid var(--color-border);
        }
        .page-section h1 { font-size: 3rem; }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            position: sticky; top: 0; z-index: 1000;
            height: var(--navbar-height); display: flex; align-items: center;
            background-color: var(--color-background); box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .navbar__container {
            display: flex; justify-content: space-between; align-items: center;
            width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem;
        }
        .navbar__brand { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); }
        .navbar__toggle { display: block; border: none; background: transparent; cursor: pointer; }
        .navbar__menu { display: none; } /* Handled by JS on mobile */

.mobile-menu {
            display: none;
            position: fixed; 
            top: var(--navbar-height); 
            left: 0;
            width: 100%;
            background-color: var(--color-background);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .mobile-menu.is-active { display: block; }
        .mobile-menu li:not(:last-child) { border-bottom: 1px solid #eeeeee; }
        .mobile-menu a { display: block; padding: 1.25rem 1.5rem; color: var(--color-text-secondary); }

/* Style for the currently active link */
        .nav-link.is-active {
            color: var(--color-primary);
            font-weight: 700;
        }

/*
        ========================================
        Desktop Navbar Styles
        ========================================
        */
        @media (min-width: 992px) {
            .navbar__toggle, .mobile-menu { display: none !important; }
            .navbar__menu {
                display: flex;
            }
            .navbar__list { display: flex; gap: 2rem; }
            .nav-link { color: var(--color-text-secondary); font-weight: 500; position: relative; padding-bottom: 5px; }
            .nav-link:hover { color: var(--color-primary); }

/* Add an underline to the active desktop link */
            .nav-link.is-active::after {
                content: '';
                position: absolute;
                bottom: 0; left: 0;
                width: 100%;
                height: 3px;
                background-color: var(--color-primary);
            }
        }
    </style>
</head>
<body>

<header class="navbar">
        <div class="navbar__container">
            <a href="#home" class="navbar__brand">Land.io</a>
            <button class="navbar__toggle" id="navbarToggle" aria-label="Open menu">&#x2630;</button>
            <nav class="navbar__menu" id="desktopMenu">
                <ul class="navbar__list">
                    <li><a href="#home" class="nav-link">Home</a></li>
                    <li><a href="#features" class="nav-link">Features</a></li>
                    <li><a href="#pricing" class="nav-link">Pricing</a></li>
                    <li><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<div class="mobile-menu" id="mobileMenu">
        <ul>
            <li><a href="#home" class="nav-link">Home</a></li>
            <li><a href="#features" class="nav-link">Features</a></li>
            <li><a href="#pricing" class="nav-link">Pricing</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
        </ul>
    </div>
    
    <main>
        <section id="home" class="page-section"><h1>Home Section</h1></section>
        <section id="features" class="page-section" style="background-color: #f9f9f9;"><h1>Features Section</h1></section>
        <section id="pricing" class="page-section"><h1>Pricing Section</h1></section>
        <section id="contact" class="page-section" style="background-color: #f9f9f9;"><h1>Contact Section</h1></section>
    </main>

if (sections.length && navLinks.length) {
            const observerOptions = {
                root: null, // relative to the viewport
                rootMargin: '0px',
                // Trigger when 50% of the section is visible
                threshold: 0.5 
            };

// Observe each section
            sections.forEach(section => {
                observer.observe(section);
            });
        }
    });
    </script>
</body>
</html>

View Output