Split Navbar Template

A classic and versatile navbar layout that cleanly separates primary navigation from secondary user actions.

This is a widely used, and highly effective layout that naturally organizes different types of navigation actions. This implementation uses a modern Flexbox approach for robust alignment.

Get Source Code → Preview →

The Split Navbar

A classic and versatile navbar layout that cleanly separates primary navigation from secondary user actions. The brand logo is positioned on the far left, the main page links are grouped in the middle, and user-centric actions like "Login" and "Sign Up" are on the far right. This is a very common and user-friendly pattern for web applications and corporate websites.

Three-Zone Layout — This navbar uses CSS Flexbox with justify-content: space-between to create three distinct zones, providing a strong visual separation between the brand, main navigation, and user actions.
Clear Visual Hierarchy — The most important user action, "Sign Up," is styled as a prominent Call-to-Action (CTA) button to draw the eye, while the secondary "Login" link is more subtle.
Fully Responsive: On smaller screens, the layout gracefully collapses into a familiar mobile pattern, with the logo on the left and a hamburger menu icon on the right, which toggles all navigation links in a clean, vertical list.
Easy to Customize: The code is built with clean CSS variables and semantic HTML, making it easy to adapt the colors, fonts, and spacing to fit any brand.

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 Split Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (App/SaaS Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #1f2937;
            --color-text-secondary: #6b7280;
            --color-cta: #4f46e5;
            --color-cta-hover: #4338ca;
            --color-border: #e5e7eb;

--font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --font-weight-medium: 500;
            --font-weight-bold: 600;
            --navbar-height: 72px;
            --container-width: 1280px;
            --navbar-padding: 1.5rem;
            --transition-speed: 0.2s;
            --border-radius: 0.5rem;
        }

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
        
        /*
        ========================================
        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 { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) var(--navbar-padding); }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; transition: color var(--transition-speed) ease; }
        
        /*
        ========================================
        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;
            align-items: center;
            width: 100%; max-width: var(--container-width);
            margin: 0 auto; padding: 0 var(--navbar-padding);
        }

/*
        ========================================
        Mobile Navigation (Default State)
        ========================================
        */
        .navbar__brand {
            font-size: 1.5rem; font-weight: var(--font-weight-bold);
            color: var(--color-text-primary); flex-shrink: 0;
            margin-right: auto; /* Push everything else to the right */
        }
        
        .navbar__main-nav { display: none; } /* Main links are hidden on mobile */
        
        .navbar__mobile-toggle {
            display: block; border: none; background: transparent; cursor: pointer;
            padding: 0.5rem;
        }

/* The mobile menu dropdown container */
        .mobile-menu {
            display: none; position: absolute; top: var(--navbar-height);
            left: 0; width: 100%;
            background-color: var(--color-background);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-top: 1px solid var(--color-border);
        }
        .mobile-menu.is-active { display: block; }
        .mobile-menu ul li a {
            display: block; padding: 1rem 1.5rem;
            color: var(--color-text-primary);
        }
        .mobile-menu ul li:not(:last-child) { border-bottom: 1px solid var(--color-border); }

:is(.navbar__mobile-toggle, a):focus-visible {
            outline: 2px solid var(--color-cta);
            outline-offset: 4px;
            border-radius: 4px;
        }
        
        /*
        ========================================
        Desktop Navigation (Split Layout)
        ========================================
        */
        @media (min-width: 992px) {
            .navbar__mobile-toggle, .mobile-menu { display: none !important; }

.navbar__container {
                /* Create the three zones */
                justify-content: space-between;
                gap: 2rem;
            }
            
            .navbar__brand { margin-right: 0; } /* Remove the auto margin */

.navbar__main-nav {
                display: flex; /* Make main nav links visible */
                flex-grow: 1; /* Allow it to take up space */
                justify-content: center; /* Center the links */
            }

.navbar__user-actions {
                display: flex;
                align-items: center;
                gap: 1rem;
                flex-shrink: 0;
            }
            
            .nav-list { display: flex; align-items: center; gap: 2rem; }
            .nav-link {
                color: var(--color-text-secondary);
                font-weight: var(--font-weight-medium);
            }
            .nav-link:hover { color: var(--color-text-primary); }
            
            .nav-link--login {
                color: var(--color-text-primary);
                font-weight: var(--font-weight-bold);
            }
            .nav-link--cta {
                color: #fff; background-color: var(--color-cta);
                padding: 0.6rem 1.25rem; border-radius: var(--border-radius);
                transition: background-color var(--transition-speed) ease;
            }
            .nav-link--cta:hover { color: #fff; background-color: var(--color-cta-hover); }
        }

</style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            
            <a href="#" class="navbar__brand">SaaSify</a>

<nav class="navbar__main-nav">
                <ul class="nav-list">
                    <li><a href="#" class="nav-link">Features</a></li>
                    <li><a href="#" class="nav-link">Solutions</a></li>
                    <li><a href="#" class="nav-link">Pricing</a></li>
                    <li><a href="#" class="nav-link">Resources</a></li>
                </ul>
            </nav>
            
            
            <div class="navbar__user-actions">
                <a href="#" class="nav-link nav-link--login">Log In</a>
                <a href="#" class="nav-link nav-link--cta">Sign Up Free</a>
            </div>

<button class="navbar__mobile-toggle" id="navbarToggle" aria-label="Open menu" aria-controls="mobileMenu" aria-expanded="false">
                &#x2630;
            </button>
        </div>
    </header>
    
    
    <div class="mobile-menu" id="mobileMenu">
        
        <ul>
            <li><a href="#">Features</a></li>
            <li><a href="#">Solutions</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Log In</a></li>
            <li><a href="#">Sign Up Free</a></li>
        </ul>
    </div>
    
    <main class="content">
        <h1>The Split Navbar</h1>
        <p>A classic layout separating brand, navigation, and user actions into three distinct zones.</p>
    </main>

if (navbarToggle && mobileMenu) {
            navbarToggle.addEventListener('click', function () {
                const isExpanded = this.getAttribute('aria-expanded') === 'true';
                this.setAttribute('aria-expanded', !isExpanded);
                mobileMenu.classList.toggle('is-active');
            });
        }
    });
    </script>
</body>
</html>

View Output