Swipeable Mobile Menu Navbar Template

A mobile-first navigation pattern that allows users to swipe horizontally through a long list of navigation links.

This pattern is an excellent alternative to a traditional dropdown for sites with many categories, like news websites or large e-commerce stores. It provides quick, direct access to a long list of items without overwhelming the user.

This component is specifically designed and styled for mobile-sized viewports. On desktop, it simply presents as a standard horizontal navbar, as horizontal swiping is not a natural interaction for mouse users.

Get Source Code → Preview →

The Swipeable Mobile Menu

A mobile-first navigation pattern that allows users to swipe horizontally through a long list of navigation links. This is an ideal solution for websites with numerous categories (e.g., news sites, large blogs, e-commerce stores), as it keeps all links on a single, scrollable line without cluttering the screen or requiring a long dropdown.

Touch-Friendly Horizontal Scrolling — On mobile viewports, the navigation list overflows its container, enabling native-like horizontal touch-scrolling. Subtle fade effects on the edges indicate to the user that more content is available.
Clean, Minimalist Interface — This pattern keeps the header compact and clean, allowing more screen space for main content.
Desktop Fallback: The swiping behavior is disabled on larger screens where it's not intuitive. The menu defaults to a standard, clean horizontal navigation bar.
Built with Pure CSS: The core swiping mechanism is achieved entirely with modern CSS properties like overflow-x: auto and scroll-snap-type for a smooth, native-feeling scroll experience.
Scroll Snapping: Uses CSS Scroll Snap to ensure that when a user finishes swiping, the links "snap" into a clean alignment, rather than being awkwardly cut off mid-way.

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.

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 Swipeable Mobile Menu</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (News/Media Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #111827;
            --color-text-secondary: #6b7280;
            --color-primary-accent: #dc2626; /* A news-y red */
            --color-border: #f3f4f6;

--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --navbar-height: 60px;
            --container-width: 1280px;
            --transition-speed: 0.2s;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.6; background-color: #f9fafb; }
        .content { min-height: 150vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; transition: color var(--transition-speed) ease; }
        
        /*
        ========================================
        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);
            border-bottom: 2px solid var(--color-border);
            padding: 0 1rem; /* Padding for the entire navbar */
        }

/*
        ========================================
        Swipeable Menu Styles (Mobile First)
        ========================================
        */
        .swipeable-nav {
            display: flex;
            align-items: center;
            width: 100%;
            position: relative; /* For the fade effects */
        }
        
        .nav-list-wrapper {
            /* This is the key to the horizontal scrolling */
            overflow-x: auto;
            /* Hides the scrollbar visually on most browsers */
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */

/* Optional: Add scroll snapping for a cleaner stop */
            scroll-snap-type: x mandatory;
        }
        .nav-list-wrapper::-webkit-scrollbar {
            display: none; /* Chrome, Safari, and Opera */
        }
        
        .nav-list {
            display: flex;
            gap: 1.5rem; /* Spacing between links */
            padding: 0 0.5rem; /* Give a little space at the ends */
        }
        
        .nav-link {
            display: block; white-space: nowrap; /* Prevent links from line-breaking */
            padding-bottom: 4px;
            color: var(--color-text-secondary);
            font-weight: 500;
            border-bottom: 3px solid transparent;
            scroll-snap-align: start; /* Each link is a snap point */
        }
        
        .nav-link:hover { color: var(--color-text-primary); }
        .nav-link.is-active {
            color: var(--color-primary-accent);
            border-bottom-color: var(--color-primary-accent);
        }

/* The fade effect to indicate more content */
        .nav-list-wrapper::before,
        .nav-list-wrapper::after {
            content: ''; position: absolute; top: 0; bottom: 0;
            width: 20px; z-index: 1; pointer-events: none;
        }
        .nav-list-wrapper::before {
            left: 0;
            background: linear-gradient(to right, var(--color-background), transparent);
        }
        .nav-list-wrapper::after {
            right: 0;
            background: linear-gradient(to left, var(--color-background), transparent);
        }
        
        /* The brand is hidden by default (mobile-first) */
        .navbar__brand {
            display: none;
        }

/*
        ========================================
        Desktop Fallback Styles
        ========================================
        */
        @media (min-width: 1024px) {
            .navbar__brand {
                display: inline-block; /* Or 'block', both work */
                font-size: 1.5rem;
                font-weight: 600;
                color: var(--color-text-primary);
                margin-right: 2rem;
            }

.nav-list-wrapper {
                /* On desktop, disable scrolling and fade effects */
                overflow-x: visible;
            }
            .nav-list-wrapper::before,
            .nav-list-wrapper::after {
                display: none;
            }
            .nav-list {
                justify-content: flex-start; /* Align to the left after the brand */
                width: auto;
                flex-grow: 1; /* Allow it to take up the remaining space */
            }
        }

</style>
</head>
<body>

<header class="navbar">
        <nav class="swipeable-nav">
            
            <a href="#" class="navbar__brand">NewsCo</a>

<div class="nav-list-wrapper">
                <ul class="nav-list">
                    <li><a href="#" class="nav-link is-active">Home</a></li>
                    <li><a href="#" class="nav-link">World</a></li>
                    <li><a href="#" class="nav-link">U.S. Politics</a></li>
                    <li><a href="#" class="nav-link">Business</a></li>
                    <li><a href="#" class="nav-link">Tech</a></li>
                    <li><a href="#" class="nav-link">Science</a></li>
                    <li><a href="#" class="nav-link">Health</a></li>
                    <li><a href="#" class="nav-link">Sports</a></li>
                    <li><a href="#" class="nav-link">Arts</a></li>
                    <li><a href="#" class="nav-link">Style</a></li>
                    <li><a href="#" class="nav-link">Travel</a></li>
                    <li><a href="#" class="nav-link">Opinion</a></li>
                </ul>
            </div>
        </nav>
    </header>
    
    <main class="content">
        <h1>Swipeable Mobile Menu</h1>
        <p>On a narrow (mobile) screen, you can swipe the navigation bar horizontally to see all the links. On a wide (desktop) screen, they are all visible at once.</p>
    </main>

</body>
</html>

View Output