Navigation Bar in CSS

From the CSS Flexbox cheat sheet · Common Patterns · verified Jul 2026

Navigation Bar

Common flexbox pattern for creating responsive navigation bars with logo and links

css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}
html
<nav class="navbar">
  <div class="nav-brand">Logo</div>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>
🧭 Common navbar pattern
💡 space-between for logo/links
📱 Easy mobile adaptation

More CSS tasks

Back to the full CSS Flexbox cheat sheet