20 CSS Responsive Navbars
15 / 20

All 20 in 20 CSS Responsive Navbars

  1. 01CSS Glassmorphism Frosted Navbar
  2. 02CSS Mega Menu Dropdown Navbar
  3. 03CSS Sidebar Drawer Navigation
  4. 04CSS Animated Underline Tabs Navbar
  5. 05CSS Pill Highlight Navigation Bar
  6. 06CSS Scroll-Aware Shrink Navbar
  7. 07CSS Neon Dark Navbar
  8. 08CSS Breadcrumb Reading Progress Navbar
  9. 09CSS Split Two-Tone Navbar
  10. 10CSS Bottom Tab Bar Navigation
  11. 11CSS Gradient Border Animated Navbar
  12. 12CSS Centered Logo Navbar
  13. 13CSS Icon Dot Indicator Navbar
  14. 14CSS Full-Screen Overlay Menu
  15. 15CSS Morphing Search Expand Navbar
  16. 16CSS Floating Island Multi-Segment Navbar
  17. 17CSS Step Progress Wizard Navbar
  18. 18CSS Vertical Rail Sidebar Navbar
  19. 19CSS Announcement Bar Dual Navbar
  20. 20CSS Scroll Spy Active Highlight Navbar
CSS + JSMIT licensed

CSS Morphing Search Expand Navbar

Navbar with a search icon that morphs into a full-width input field using JS and CSS max-width transition.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<div class="nav-15" id="nav15">
  <input type="checkbox" id="nav-15-toggle">
  <div class="nav-15__inner">
    <a href="#" class="nav-15__logo">Synapse<span>.</span></a>
    <ul class="nav-15__links">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <div class="nav-15__search-wrap">
      <div class="nav-15__search" id="nav15Search">
        <button class="nav-15__search-btn" id="nav15SearchBtn" aria-label="Search">🔍</button>
        <input type="text" class="nav-15__search-input" id="nav15SearchInput" placeholder="Search docs, features...">
      </div>
    </div>
    <button class="nav-15__btn">Sign up</button>
    <label for="nav-15-toggle" class="nav-15__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-15__mobile">
    <a href="#">Home</a><a href="#">Features</a><a href="#">Pricing</a><a href="#">Docs</a><a href="#">Blog</a>
    <a href="#" style="color:#3b82f6; font-weight:700;">Sign up →</a>
  </div>
</div>
<div style="padding:4rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.04em; margin-bottom:1rem; color:#0f172a;">Morphing Search Expand Navbar</h1>
  <p style="color:#64748b; font-size:1.05rem; line-height:1.75;">Click the 🔍 icon to expand the search bar. It grows from 40px to 280px with a smooth <code>width</code> transition, the nav links fade out to give it room, and clicking outside collapses it.</p>
</div>
.nav-15,
.nav-15 *,
.nav-15 *::before,
.nav-15 *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nav-15 {
  --bg: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #3b82f6;
  --accent-light: #eff6ff;
  --border: #e2e8f0;
  font-family: 'Figtree', sans-serif;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nav-15__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  height: 64px;
  gap: 1.5rem;
  position: relative;
}

.nav-15__logo {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.nav-15__logo span {
  color: var(--accent);
}

.nav-15__links {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  flex: 1;
  transition: opacity 0.3s, visibility 0.3s;
}

.nav-15__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.nav-15__links a:hover {
  color: var(--text);
  background: var(--accent-light);
}

.nav-15__links a.is-active {
  color: var(--accent);
}
/* Search */

.nav-15__search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.nav-15__search {
  display: flex;
  align-items: center;
  background: var(--accent-light);
  border: 1.5px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  width: 40px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1), border-color 0.3s, background 0.3s;
}

.nav-15__search.is-expanded {
  width: 280px;
  border-color: var(--accent);
  background: #fff;
}

.nav-15__search-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 1rem;
  border-radius: 10px;
  transition: color 0.2s;
}

.nav-15__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  padding-right: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.nav-15__search.is-expanded .nav-15__search-input {
  opacity: 1;
  pointer-events: all;
}

.nav-15__search-input::placeholder {
  color: var(--muted);
}
/* When expanded, hide links */

.nav-15.is-searching .nav-15__links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-15__btn {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: var(--accent);
  color: #fff;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.nav-15__btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}
/* Mobile */

#nav-15-toggle {
  display: none;
}

.nav-15__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: none;
  background: transparent;
}

.nav-15__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(2) {
  opacity: 0;
}

#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-15__mobile {
  display: none;
  flex-direction: column;
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--border);
  gap: 0.25rem;
}

.nav-15__mobile a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.nav-15__mobile a:hover {
  background: var(--accent-light);
  color: var(--accent);
}

#nav-15-toggle:checked ~ .nav-15__mobile {
  display: flex;
}

@media (max-width: 768px) {
  .nav-15__links,
    .nav-15__btn {
    display: none;
  }

  .nav-15__hamburger {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-15__search,
    .nav-15__links,
    .nav-15__search-input {
    transition: none;
  }

  .nav-15__btn,
    .nav-15__hamburger span {
    transition: none;
  }
}
const nav = document.getElementById('nav15');
  const search = document.getElementById('nav15Search');
  const btn = document.getElementById('nav15SearchBtn');
  const input = document.getElementById('nav15SearchInput');
  let open = false;
  function openSearch() {
    open = true;
    search.classList.add('is-expanded');
    nav.classList.add('is-searching');
    setTimeout(() => input.focus(), 350);
  }
  function closeSearch() {
    open = false;
    search.classList.remove('is-expanded');
    nav.classList.remove('is-searching');
    input.value = '';
  }
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    open ? closeSearch() : openSearch();
  });
  document.addEventListener('click', function(e) {
    if (open && !search.contains(e.target)) closeSearch();
  });
  input.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeSearch();
  });
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Responsive Navbar from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Morphing Search Expand Navbar
Source: https://codefronts.com/navigation/css-responsive-navbar/css-morphing-search-expand-navbar/

Navbar with a search icon that morphs into a full-width input field using JS and CSS max-width transition.
## HTML
```html
<div class="nav-15" id="nav15">
  <input type="checkbox" id="nav-15-toggle">
  <div class="nav-15__inner">
    <a href="#" class="nav-15__logo">Synapse<span>.</span></a>
    <ul class="nav-15__links">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <div class="nav-15__search-wrap">
      <div class="nav-15__search" id="nav15Search">
        <button class="nav-15__search-btn" id="nav15SearchBtn" aria-label="Search">🔍</button>
        <input type="text" class="nav-15__search-input" id="nav15SearchInput" placeholder="Search docs, features...">
      </div>
    </div>
    <button class="nav-15__btn">Sign up</button>
    <label for="nav-15-toggle" class="nav-15__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-15__mobile">
    <a href="#">Home</a><a href="#">Features</a><a href="#">Pricing</a><a href="#">Docs</a><a href="#">Blog</a>
    <a href="#" style="color:#3b82f6; font-weight:700;">Sign up →</a>
  </div>
</div>
<div style="padding:4rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.04em; margin-bottom:1rem; color:#0f172a;">Morphing Search Expand Navbar</h1>
  <p style="color:#64748b; font-size:1.05rem; line-height:1.75;">Click the 🔍 icon to expand the search bar. It grows from 40px to 280px with a smooth <code>width</code> transition, the nav links fade out to give it room, and clicking outside collapses it.</p>
</div>
```
## CSS
```css
.nav-15,
.nav-15 *,
.nav-15 *::before,
.nav-15 *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nav-15 {
  --bg: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #3b82f6;
  --accent-light: #eff6ff;
  --border: #e2e8f0;
  font-family: 'Figtree', sans-serif;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nav-15__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  height: 64px;
  gap: 1.5rem;
  position: relative;
}

.nav-15__logo {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.nav-15__logo span {
  color: var(--accent);
}

.nav-15__links {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  flex: 1;
  transition: opacity 0.3s, visibility 0.3s;
}

.nav-15__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.nav-15__links a:hover {
  color: var(--text);
  background: var(--accent-light);
}

.nav-15__links a.is-active {
  color: var(--accent);
}
/* Search */

.nav-15__search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.nav-15__search {
  display: flex;
  align-items: center;
  background: var(--accent-light);
  border: 1.5px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  width: 40px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1), border-color 0.3s, background 0.3s;
}

.nav-15__search.is-expanded {
  width: 280px;
  border-color: var(--accent);
  background: #fff;
}

.nav-15__search-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 1rem;
  border-radius: 10px;
  transition: color 0.2s;
}

.nav-15__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  padding-right: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.nav-15__search.is-expanded .nav-15__search-input {
  opacity: 1;
  pointer-events: all;
}

.nav-15__search-input::placeholder {
  color: var(--muted);
}
/* When expanded, hide links */

.nav-15.is-searching .nav-15__links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-15__btn {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: var(--accent);
  color: #fff;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.nav-15__btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}
/* Mobile */

#nav-15-toggle {
  display: none;
}

.nav-15__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: none;
  background: transparent;
}

.nav-15__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(2) {
  opacity: 0;
}

#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-15__mobile {
  display: none;
  flex-direction: column;
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--border);
  gap: 0.25rem;
}

.nav-15__mobile a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.nav-15__mobile a:hover {
  background: var(--accent-light);
  color: var(--accent);
}

#nav-15-toggle:checked ~ .nav-15__mobile {
  display: flex;
}

@media (max-width: 768px) {
  .nav-15__links,
    .nav-15__btn {
    display: none;
  }

  .nav-15__hamburger {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-15__search,
    .nav-15__links,
    .nav-15__search-input {
    transition: none;
  }

  .nav-15__btn,
    .nav-15__hamburger span {
    transition: none;
  }
}
```

## JavaScript
```js
const nav = document.getElementById('nav15');
  const search = document.getElementById('nav15Search');
  const btn = document.getElementById('nav15SearchBtn');
  const input = document.getElementById('nav15SearchInput');
  let open = false;
  function openSearch() {
    open = true;
    search.classList.add('is-expanded');
    nav.classList.add('is-searching');
    setTimeout(() => input.focus(), 350);
  }
  function closeSearch() {
    open = false;
    search.classList.remove('is-expanded');
    nav.classList.remove('is-searching');
    input.value = '';
  }
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    open ? closeSearch() : openSearch();
  });
  document.addEventListener('click', function(e) {
    if (open && !search.contains(e.target)) closeSearch();
  });
  input.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeSearch();
  });
```

How this works

The search component starts as a small icon button. Clicking it adds an .is-expanded class that transitions max-width from the icon's collapsed size to a large value (e.g. 400px), simultaneously fading in the text input and shifting the nav links out of view. The input receives focus() programmatically so the user can type immediately. Pressing Escape or clicking a close icon triggers the reverse transition by removing the class.

Make it yours

  • Make the expanded input push links off rather than overlap them by animating the link container's width or opacity simultaneously.
  • Add a live search results dropdown by listening to the input event inside the expanded state.
  • On mobile, expand the search to full screen by setting max-width: 100vw and adding a backdrop.

Gotchas — read before shipping

  • Transitioning max-width can feel uneven because the browser interpolates from the computed max-width — if the content is shorter, there's a pause before animation starts. Use width with explicit start and end values for more predictable motion.
  • Ensure the collapsed icon state has overflow: hidden to clip the invisible input — otherwise it can still receive tab focus.

Browser support

ChromeSafariFirefoxEdge
49+9+44+49+

No advanced CSS features. The focus() call requires a user gesture in Safari — triggering it on click satisfies this requirement.

Techniques used in this demo

box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →