Search-Focused Navbar Template

Search-focused navbar that features a prominent search icon that smoothly expands into a full search bar on click.

This navbar design is ideal for blogs, e-commerce sites, or any application where search is a primary user action. It keeps the interface clean by default but provides a large, accessible search input upon user interaction.

Get Source Code → Preview →

The Search-Focused Navbar

A modern and clean navbar that prioritizes the search function. It features a prominent search icon that smoothly expands into a full search bar on click. This pattern keeps the header uncluttered while making the search functionality immediately accessible and easy to use.

Expanding Search Animation — The search input is hidden by default and smoothly animates to its full width when the user clicks the search icon.
Smart Mobile Layout — On mobile devices, opening the search bar automatically hides other navigation elements to dedicate the entire header space to the search input.
Fully Responsive — The component includes a standard, working hamburger menu for mobile navigation, which functions independently of the search feature.
Accessible & Semantic: The component is built with proper HTML forms, and JavaScript is used to manage ARIA states and focus for both the search and mobile menu.

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>Search-Focused Navbar (Corrected)</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Functional Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff; --color-text-primary: #1c1c1e;
            --color-text-secondary: #8a8a8e; --color-primary: #007aff;
            --color-border: #d1d1d6; --color-input-bg: #f2f2f2;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --navbar-height: 70px; --container-width: 1140px;
            --transition-speed: 0.3s; --border-radius: 8px;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); background-color: #f9f9f9; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1.5rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-primary); }

/*
        ========================================
        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: 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; gap: 1rem; }
        .navbar__brand { font-size: 1.5rem; font-weight: 600; flex-shrink: 0; transition: opacity var(--transition-speed) ease, width var(--transition-speed) ease, margin-right var(--transition-speed) ease, padding var(--transition-speed) ease; }
        .navbar__actions { display: flex; align-items: center; gap: 0.5rem; }
        
        /* Mobile menu toggle button */
        .navbar__toggle { display: block; border: none; background: transparent; cursor: pointer; font-size: 1.5rem; }
        
        /* The container for mobile navigation links */
        .navbar__menu {
            display: none; /* Hidden by default */
            position: absolute; top: var(--navbar-height);
            left: 0; width: 100%; background-color: var(--color-background);
            border-top: 1px solid var(--color-border);
        }

/* Show the menu when it has the .is-active class */
        .navbar__menu.is-active { display: block; }
        .navbar__menu a { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); }

/*
        ========================================
        Search Form Styles & Animation
        ========================================
        */
        .search-form { display: flex; align-items: center; justify-content: flex-end; position: relative; }
        .search-form__input { width: 0; padding: 0.75rem 0; border: none; background: transparent; font-size: 1rem; opacity: 0; visibility: hidden; transition: all var(--transition-speed) ease; }
        .search-form__input:focus { outline: none; }
        .search-form__submit { background: transparent; border: none; cursor: pointer; padding: 0.5rem; display: flex; }
        .search-form__submit svg { width: 24px; height: 24px; color: var(--color-text-secondary); }
        .search-form.is-open .search-form__input { width: 240px; padding-right: 1rem; opacity: 1; visibility: visible; background-color: var(--color-input-bg); border-radius: var(--border-radius); padding-left: 1rem; }

/*
        ========================================
        Desktop & Responsive Styles
        ========================================
        */        
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu {
                display: flex; /* Override mobile display:none */
                position: static; border: none; /* Reset mobile absolute positioning */
                flex-grow: 1; align-items: center;
            }
            .navbar__list { display: flex; gap: 1.5rem; }
            .navbar__menu a { border: none; padding: 0; }
        }
        
        /*
        ========================================
        Mobile-Specific Layout Changes on Search
        ========================================
        Mobile layout changes on search open.
        */
        .navbar__brand.is-hidden-on-search,
        .navbar__toggle.is-hidden-on-search { opacity: 0; width: 0; margin-right: -1rem; padding: 0; }
        .search-form.is-open { flex-grow: 1; }
    </style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand" id="navbar-brand">Brand</a>
            <nav class="navbar__menu" id="navbar-menu">
                <ul class="navbar__list">
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">Deals</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
            <div class="navbar__actions">
                <form class="search-form" id="search-form" role="search">
                    <input class="search-form__input" type="search" id="search-input" placeholder="Search articles..." aria-label="Search">
                    <button class="search-form__submit" id="search-toggle" type="submit" aria-label="Submit search">
                        <svg viewBox="0 0 24 24"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg>                    
                </form>
                <button class="navbar__toggle" id="navbar-toggle" aria-label="Open navigation menu" aria-expanded="false" aria-controls="navbar-menu">&#x2630;</button>
            </div>
        </div>
    </header>
    <main class="content">
        <h1>Search-Focused Navbar</h1>
        <p>Click the search icon in the header to expand the search bar.</p>
    </main>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchForm = document.getElementById('search-form');
        const searchToggle = document.getElementById('search-toggle');
        const searchInput = document.getElementById('search-input');
        const navbarBrand = document.getElementById('navbar-brand');
        
        // Mobile menu elements and logic
        const mobileMenuToggle = document.getElementById('navbar-toggle');
        const mobileMenu = document.getElementById('navbar-menu');
        
        if (!searchForm || !searchToggle || !searchInput || !mobileMenuToggle || !mobileMenu) return;
        
        // Search bar logic
        searchToggle.addEventListener('click', function(event) {
            if (!searchForm.classList.contains('is-open')) {
                event.preventDefault(); searchForm.classList.add('is-open');
                const isMobileView = getComputedStyle(mobileMenuToggle).display !== 'none';
                if (isMobileView) {
                    if (navbarBrand) navbarBrand.classList.add('is-hidden-on-search');
                    if (mobileMenuToggle) mobileMenuToggle.classList.add('is-hidden-on-search');
                }
                searchInput.focus();
            } else if (searchInput.value === '') {
                 event.preventDefault(); closeSearch();
            }
        });
        
        function closeSearch() {
            searchForm.classList.remove('is-open');
            if (navbarBrand) navbarBrand.classList.remove('is-hidden-on-search');
            if (mobileMenuToggle) mobileMenuToggle.classList.remove('is-hidden-on-search');
        }

document.addEventListener('click', function(event) {
            if (!searchForm.contains(event.target) && searchForm.classList.contains('is-open')) {
                closeSearch();
            }
        });

// Mobile menu toggle functionality
        mobileMenuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('is-active');
            const isExpanded = mobileMenu.classList.contains('is-active');
            this.setAttribute('aria-expanded', isExpanded);
        });
    });
    </script>
</body>
</html>

View Output