Chapter 11: Top Navigation
How to create a good Top Navigation bar (also called navbar, header navigation, top bar, main menu).
We’ll go through different common styles and real-world patterns that are actually used in 2025–2026 websites and web applications.
What makes a good top navigation bar?
Before we write any code, let’s agree on the most important goals:
- Clear hierarchy — logo → main links → secondary actions (search, login, cart, profile)
- Easy to scan — users should understand where they are and where they can go in 1–2 seconds
- Good spacing & touch targets — especially on mobile
- Responsive behavior — collapses gracefully on small screens
- Visual feedback — hover, active page, mobile menu open/close
- Accessibility — keyboard navigation, screen reader support
- Performance — doesn’t slow down the page
Most common patterns in 2025–2026
| Pattern | Best for | Mobile behavior | Examples you know |
|---|---|---|---|
| Classic centered logo + links | Corporate, blogs, marketing sites | Hamburger menu | Most company websites |
| Logo left + links center + CTA right | SaaS products, tools, dashboards | Hamburger or bottom tab bar | Notion, Linear, Figma, Stripe |
| Logo left + minimal links + right icons | E-commerce, apps | Hamburger + bottom bar sometimes | Amazon, Flipkart, Medium |
| Full-width with mega menu | Large sites with many categories | Accordion or full-screen overlay | Nike, Apple, Samsung |
| Sticky + shrinking on scroll | Long content pages | Stays visible | Many modern marketing sites |
Let’s build the most common and versatile version first — then we’ll look at variations.
Pattern 1 – Modern Classic Top Navigation (very widely used)
HTML Structure
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<header class="site-header"> <nav class="navbar container"> <!-- Logo / brand --> <a href="/" class="logo"> <img src="/logo.svg" alt="Company Name" width="140" height="36"> <!-- or just text: <strong>Company</strong> --> </a> <!-- Main navigation links (desktop) --> <ul class="nav-links"> <li><a href="/features" class="active">Features</a></li> <li><a href="/pricing">Pricing</a></li> <li><a href="/customers">Customers</a></li> <li><a href="/resources">Resources</a></li> </ul> <!-- Right side actions --> <div class="nav-actions"> <button class="search-btn" aria-label="Search"> <svg width="20" height="20">…</svg> </button> <a href="/login" class="btn-login">Log in</a> <a href="/signup" class="btn-primary">Get Started</a> </div> <!-- Mobile menu button --> <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </nav> <!-- Mobile menu (hidden by default) --> <div class="mobile-menu" hidden> <ul> <li><a href="/features">Features</a></li> <li><a href="/pricing">Pricing</a></li> <li><a href="/customers">Customers</a></li> <li><a href="/resources">Resources</a></li> <li class="divider"></li> <li><a href="/login">Log in</a></li> <li><a href="/signup" class="btn-primary">Get Started</a></li> </ul> </div> </header> |
CSS – Desktop + Mobile
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
.site-header { position: sticky; top: 0; z-index: 1000; background: white; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .navbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; max-width: 1400px; margin: 0 auto; } .logo { font-size: 1.5rem; font-weight: 700; color: #111; text-decoration: none; } .nav-links { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; } .nav-links a { color: #374151; text-decoration: none; font-weight: 500; padding: 0.5rem 0; transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: #2563eb; } .nav-actions { display: flex; align-items: center; gap: 1.25rem; } .btn-login { color: #374151; font-weight: 500; text-decoration: none; } .btn-primary { background: #2563eb; color: white; padding: 0.65rem 1.4rem; border-radius: 6px; text-decoration: none; font-weight: 500; } /* Mobile menu button */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .bar { display: block; width: 26px; height: 3px; background: #111; margin: 5px auto; transition: all 0.3s; } /* Mobile styles */ @media (max-width: 1024px) { .nav-links, .nav-actions > *:not(.menu-toggle) { display: none; } .menu-toggle { display: block; } .mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background: white; border-top: 1px solid #e5e7eb; padding: 1.5rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .mobile-menu ul { list-style: none; padding: 0; margin: 0; } .mobile-menu a { display: block; padding: 1rem 0; font-size: 1.1rem; color: #111; text-decoration: none; } .mobile-menu .btn-primary { display: block; text-align: center; margin-top: 1rem; } } /* When mobile menu is open */ .mobile-menu[aria-hidden="false"] { display: block; } |
JavaScript – Mobile menu toggle
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
document.addEventListener('DOMContentLoaded', () => { const toggle = document.querySelector('.menu-toggle'); const menu = document.querySelector('.mobile-menu'); toggle.addEventListener('click', () => { const isExpanded = toggle.getAttribute('aria-expanded') === 'true'; toggle.setAttribute('aria-expanded', !isExpanded); menu.hidden = isExpanded; // Optional: animate hamburger to X toggle.classList.toggle('active'); }); }); |
Add this CSS for nice X animation:
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle.active .bar:nth-child(2) { opacity: 0; } .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } |
Quick variations you should know
1. Shrinking header on scroll (very modern look)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
.site-header.scrolled { padding: 0.6rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .site-header.scrolled .logo img { width: 110px; } |
JavaScript:
|
0 1 2 3 4 5 6 7 8 |
window.addEventListener('scroll', () => { document.querySelector('.site-header').classList.toggle('scrolled', window.scrollY > 50); }); |
2. With search in center (common in SaaS)
HTML
|
0 1 2 3 4 5 6 7 8 |
<div class="nav-center"> <input type="search" placeholder="Search docs, components..." class="search-input"> </div> |
3. Mega menu on hover (for categories)
We usually show a big dropdown panel when hovering “Products” or “Solutions”.
Summary – What to decide when building a top nav
| Question | Common choice 2025–2026 |
|---|---|
| Logo left or center? | Left (almost always) |
| How many main links? | 3–6 (more → dropdown) |
| Sticky or not? | Sticky in most cases |
| Hamburger on mobile? | Yes (from ~1024px) |
| CTA button? | Yes — bright color |
| Search? | Icon or full field |
| Icons on right? | Cart, profile, notifications, search |
Would you like to go much deeper into any of these variations?
Examples:
- Mega menu (dropdown with columns and images)
- Centered logo style
- Transparent header over hero section
- Bottom navigation bar for mobile-first apps
- Dashboard-style sidebar + top bar combo
- Animated underline on active link
- Dark mode navbar
Just tell me which direction you want — I’ll explain it with complete code, slowly and clearly. 😊
