Progress Bar Navbar Template

Very useful navbar that shows a progress bar as the user scrolls down the page (but without being gimmicky). Fully mobile-responsive and accessible.

This is a highly functional and user-centric component, perfect for blogs, documentation sites, and long articles. It provides clear, visual feedback to the user about their progress through the content.

Get Source Code → Preview →

The Progress Bar Navbar

A smart and user-friendly navbar that includes a thin progress indicator. As the user scrolls down a page, the bar fills up, giving them a visual cue of how much content they have read and how much remains. This is particularly useful for long articles, blog posts, and documentation pages.

Real-time Progress Calculation — JavaScript listens to the scroll event and calculates the user's position as a percentage of the total page height. This percentage is then used to set the width of the progress indicator.
Unobtrusive Design — The progress bar is a thin, clean line at the very bottom of the navbar, providing useful information without being distracting or taking up extra screen space.
Performant & Efficient: The component is built with modern and efficient code. The core logic is simple and has minimal impact on performance.
Accessible by Design: The progress bar is a purely visual element and is hidden from screen readers using aria-hidden="true" to avoid unnecessary noise for assistive technology users. All interactive elements are fully accessible.
Standard Layout: Built upon a classic, responsive navbar layout that collapses into a hamburger menu on mobile.

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 Progress Bar Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Content Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #2c3e50;
            --color-text-secondary: #7f8c8d;
            --color-primary: #3498db; /* Blue for the progress bar */
            --color-border: #ecf0f1;
            
            --progress-bar-height: 4px;
            --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --navbar-height: 70px;
            --container-width: 1140px;
            --transition-speed: 0.2s;
        }
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
        
        /*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.7; background-color: var(--color-background); }
        .content {
            height: 300vh; /* Make the page very long to see the effect */
            max-width: 800px; margin: 0 auto;
            padding: calc(var(--navbar-height) + 3rem) 1.5rem;
        }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-secondary); transition: color var(--transition-speed) ease; }
        a:hover, a:focus { color: var(--color-text-primary); }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            height: var(--navbar-height); display: flex; align-items: center;
            position: sticky; top: 0; z-index: 1000;
            background-color: var(--color-background);
            border-bottom: 1px solid var(--color-border);
        }
        .navbar__container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; }
        .navbar__brand { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); }

/* Mobile Menu */
        .navbar__toggle { display: block; border: none; background: transparent; cursor: pointer; }
        .navbar__menu { display: none; position: absolute; top: var(--navbar-height); left: 0; width: 100%; background-color: var(--color-background); border-top: 1px solid var(--color-border); }
        .navbar__menu.is-active { display: block; }
        .navbar__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }
        .navbar__link { display: block; padding: 1.25rem 1.5rem; font-weight: 500; }

/*
        ========================================
        Progress Bar Styles
        ========================================
        */
        .progress-bar {
            position: absolute; bottom: -1px; /* Overlap the border slightly */
            left: 0;
            width: 100%; height: var(--progress-bar-height);
            background-color: transparent; /* The track is invisible by default */
        }

.progress-bar__indicator {
            height: 100%; width: 0; /* Starts at 0 width */
            background-color: var(--color-primary);
            transition: width 0.1s linear; /* Smooths out rapid updates slightly */
        }
        
        /*
        ========================================
        Desktop & Responsive Styles
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu { display: flex; align-items: center; position: static; width: auto; background: none; border: none; }
            .navbar__list { display: flex; gap: 2rem; }
            .navbar__item:not(:last-child) { border-bottom: none; }
            .navbar__link { padding: 0.5rem; }
        }
    </style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">LongRead</a>
            
            <button class="navbar__toggle" id="navbarToggle" aria-label="Open menu">&#x2630;</button>
            
            <nav class="navbar__menu" id="navbarMenu">
                <ul class="navbar__list">
                    <li><a href="#" class="navbar__link">Section 1</a></li>
                    <li><a href="#" class="navbar__link">Section 2</a></li>
                    <li><a href="#" class="navbar__link">About</a></li>
                </ul>
            </nav>
        </div>
        
        
        <div class="progress-bar" aria-hidden="true">
            <div class="progress-bar__indicator" id="progressIndicator"></div>
        </div>
    </header>

<main class="content">
        <h1>The Progress Bar Navbar</h1>
        <p>As you scroll down this long page, the blue bar at the bottom of the navigation will fill up, indicating your reading progress.</p>
    </main>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- Mobile Menu Toggle ---
        const navbarToggle = document.getElementById('navbarToggle');
        const navbarMenu = document.getElementById('navbarMenu');
        if (navbarToggle && navbarMenu) {
            navbarToggle.addEventListener('click', () => {
                navbarMenu.classList.toggle('is-active');
            });
        }

// --- Progress Bar Logic ---
        const progressIndicator = document.getElementById('progressIndicator');
        
        function updateProgressBar() {
            // Get the total scrollable height of the document
            const totalScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            // Get the current scroll position
            const scrolled = window.scrollY;
            
            // Calculate the scroll percentage
            // Avoid division by zero if there's no scrollbar
            const scrollPercentage = totalScrollHeight > 0 ? (scrolled / totalScrollHeight) * 100 : 0;
            
            if (progressIndicator) {
                // Set the width of the indicator bar
                progressIndicator.style.width = scrollPercentage + '%';
            }
        }
        
        // Listen for scroll events on the window
        window.addEventListener('scroll', updateProgressBar);
        // Run once on load in case the page is already scrolled
        updateProgressBar();
    });
    </script>
</body>
</html>

View Output