CSS Responsive Navigation

Create beautiful, accessible navigation systems that work perfectly on all devices

Why Responsive Navigation Matters

Responsive navigation is crucial for modern web design. With over 50% of web traffic coming from mobile devices, your navigation must adapt seamlessly to different screen sizes while maintaining usability and accessibility.

Key Principles of Responsive Navigation:

  • Mobile-first approach
  • Progressive enhancement
  • Touch-friendly targets (minimum 44px)
  • Clear visual hierarchy
  • Fast loading and performance
  • Accessibility compliance
  • Smooth transitions and feedback

Basic Responsive Navigation

The foundation of responsive navigation: a simple navbar that transforms into a hamburger menu on mobile devices.

/* Mobile-first media query */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    width: 100%;
  }
  .nav-menu.active { left: 0; }
}

Basic Responsive Nav Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Responsive Navigation</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }
    
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: 1rem 2rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    
    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: #667eea;
      text-decoration: none;
    }
    
    .nav-menu {
      display: flex;
      list-style: none;
      gap: 2rem;
      align-items: center;
    }
    
    .nav-link {
      text-decoration: none;
      color: #4a5568;
      font-weight: 500;
      transition: color 0.3s ease;
      padding: 0.5rem 1rem;
      border-radius: 8px;
    }
    
    .nav-link:hover {
      color: #667eea;
      background: rgba(102, 126, 234, 0.1);
    }
    
    .nav-link.active {
      color: #667eea;
      background: rgba(102, 126, 234, 0.1);
    }
    
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 4px;
    }
    
    .hamburger span {
      width: 25px;
      height: 3px;
      background: #4a5568;
      transition: 0.3s;
      border-radius: 2px;
    }
    
    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(6px, 6px);
    }
    
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }
    
    .content {
      max-width: 1200px;
      margin: 4rem auto;
      padding: 2rem;
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 2.5rem;
    }
    
    p {
      color: #4a5568;
      line-height: 1.7;
      margin-bottom: 1rem;
    }
    
    /* Mobile Styles */
    @media (max-width: 768px) {
      .hamburger {
        display: flex;
      }
      
      .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        gap: 0;
      }
      
      .nav-menu.active {
        left: 0;
      }
      
      .nav-link {
        display: block;
        padding: 1rem;
        width: 100%;
      }
      
      .nav-link:hover {
        background: rgba(102, 126, 234, 0.1);
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="nav-container">
      <a href="#" class="logo">NavBrand</a>
      
      <ul class="nav-menu">
        <li><a href="#" class="nav-link active">Home</a></li>
        <li><a href="#" class="nav-link">About</a></li>
        <li><a href="#" class="nav-link">Services</a></li>
        <li><a href="#" class="nav-link">Portfolio</a></li>
        <li><a href="#" class="nav-link">Contact</a></li>
      </ul>
      
      <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </nav>
  
  <div class="content">
    <h1>Responsive Navigation Demo</h1>
    <p>Resize your browser window to see the navigation adapt to different screen sizes. On mobile devices, the menu collapses into a hamburger icon.</p>
    <p>The navigation uses CSS media queries and JavaScript to toggle the mobile menu. The design is fully responsive and accessible.</p>
    <p>Try clicking the hamburger icon on mobile view to see the smooth animation!</p>
  </div>

  <script>
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    
    hamburger.addEventListener('click', () => {
      hamburger.classList.toggle('active');
      navMenu.classList.toggle('active');
    });
    
    // Close menu when clicking on a link
    document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navMenu.classList.remove('active');
      });
    });
  </script>
</body>
</html>

Responsive Mega Menu

Mega menus provide rich navigation experiences on desktop while transforming into accessible accordions on mobile.

Desktop Behavior

Hover triggers with CSS Grid layout for organized content sections.

.mega-menu {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));
}

Mobile Adaptation

Converts to vertical accordion with click activation for touch devices.

@media (max-width: 768px) {
  .mega-menu {
    grid-template-columns: 1fr;
  }
}

Mega Menu Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Mega Menu</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      min-height: 100vh;
    }
    
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    
    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: #f5576c;
      text-decoration: none;
    }
    
    .nav-menu {
      display: flex;
      list-style: none;
      gap: 0;
      align-items: center;
    }
    
    .nav-item {
      position: relative;
    }
    
    .nav-link {
      text-decoration: none;
      color: #4a5568;
      font-weight: 500;
      padding: 1rem 1.5rem;
      display: block;
      transition: all 0.3s ease;
    }
    
    .nav-link:hover {
      color: #f5576c;
      background: rgba(245, 87, 108, 0.1);
    }
    
    /* Mega Menu Styles */
    .mega-menu {
      position: absolute;
      left: 0;
      top: 100%;
      width: 100vw;
      background: white;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      padding: 2rem;
      border-radius: 0 0 20px 20px;
    }
    
    .mega-menu.active {
      display: grid;
      animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .mega-column h3 {
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 1.1rem;
      font-weight: 600;
    }
    
    .mega-column a {
      display: block;
      padding: 0.5rem 0;
      color: #4a5568;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    
    .mega-column a:hover {
      color: #f5576c;
    }
    
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 4px;
    }
    
    .hamburger span {
      width: 25px;
      height: 3px;
      background: #4a5568;
      transition: 0.3s;
      border-radius: 2px;
    }
    
    .content {
      max-width: 1200px;
      margin: 4rem auto;
      padding: 2rem;
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    /* Mobile Styles */
    @media (max-width: 1024px) {
      .mega-menu {
        grid-template-columns: 1fr 1fr;
      }
    }
    
    @media (max-width: 768px) {
      .hamburger {
        display: flex;
      }
      
      .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: white;
        width: 100%;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
      }
      
      .nav-menu.active {
        left: 0;
      }
      
      .nav-item {
        width: 100%;
      }
      
      .mega-menu {
        position: static;
        width: 100%;
        display: none;
        grid-template-columns: 1fr;
        box-shadow: none;
        padding: 1rem;
        background: #f7fafc;
      }
      
      .mega-menu.active {
        display: grid;
        animation: none;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="nav-container">
      <a href="#" class="logo">MegaMenu</a>
      
      <ul class="nav-menu">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Products</a>
          <div class="mega-menu">
            <div class="mega-column">
              <h3>Web Development</h3>
              <a href="#">Frontend</a>
              <a href="#">Backend</a>
              <a href="#">Full Stack</a>
              <a href="#">APIs</a>
            </div>
            <div class="mega-column">
              <h3>Design</h3>
              <a href="#">UI/UX Design</a>
              <a href="#">Graphic Design</a>
              <a href="#">Branding</a>
              <a href="#">Motion Graphics</a>
            </div>
            <div class="mega-column">
              <h3>Marketing</h3>
              <a href="#">SEO</a>
              <a href="#">Content Marketing</a>
              <a href="#">Social Media</a>
              <a href="#">Email Marketing</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
          <div class="mega-menu">
            <div class="mega-column">
              <h3>Consulting</h3>
              <a href="#">Strategy</a>
              <a href="#">Implementation</a>
              <a href="#">Optimization</a>
            </div>
            <div class="mega-column">
              <h3>Support</h3>
              <a href="#">24/7 Support</a>
              <a href="#">Training</a>
              <a href="#">Documentation</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contact</a>
        </li>
      </ul>
      
      <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </nav>
  
  <div class="content">
    <h1>Responsive Mega Menu</h1>
    <p>This navigation features a mega menu that adapts to different screen sizes. Hover over the "Products" or "Services" links to see the mega menu on desktop, or click the hamburger icon on mobile.</p>
    <p>The mega menu uses CSS Grid for layout and transforms into an accordion-style menu on mobile devices.</p>
  </div>

  <script>
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    const megaMenuTriggers = document.querySelectorAll('.nav-item');
    
    hamburger.addEventListener('click', () => {
      hamburger.classList.toggle('active');
      navMenu.classList.toggle('active');
    });
    
    // Mega menu functionality
    megaMenuTriggers.forEach(item => {
      const megaMenu = item.querySelector('.mega-menu');
      
      if (megaMenu) {
        // Desktop hover
        item.addEventListener('mouseenter', () => {
          if (window.innerWidth > 768) {
            megaMenu.classList.add('active');
          }
        });
        
        item.addEventListener('mouseleave', () => {
          if (window.innerWidth > 768) {
            megaMenu.classList.remove('active');
          }
        });
        
        // Mobile click
        item.addEventListener('click', (e) => {
          if (window.innerWidth <= 768) {
            e.preventDefault();
            megaMenu.classList.toggle('active');
          }
        });
      }
    });
    
    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.nav-menu')) {
        document.querySelectorAll('.mega-menu').forEach(menu => {
          menu.classList.remove('active');
        });
      }
    });
  </script>
</body>
</html>

Responsive Sidebar Navigation

Sidebar navigation is perfect for dashboards and admin panels, transforming into off-canvas menus on mobile.

/* Desktop sidebar */
.sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

/* Mobile transformation */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.active {
    transform: translateX(0);
  }
}

Sidebar Best Practices:

  • Use overlay for mobile to improve focus
  • Implement smooth slide animations
  • Ensure touch-friendly menu items
  • Add keyboard navigation support
  • Include clear close mechanisms
  • Maintain consistent spacing

Sidebar Navigation Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Sidebar Navigation</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      display: flex;
    }
    
    /* Sidebar Styles */
    .sidebar {
      width: 250px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      z-index: 1000;
    }
    
    .sidebar-header {
      padding: 2rem;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: #4facfe;
      text-decoration: none;
    }
    
    .sidebar-nav {
      padding: 1rem 0;
    }
    
    .nav-item {
      list-style: none;
    }
    
    .nav-link {
      display: flex;
      align-items: center;
      padding: 1rem 2rem;
      color: #4a5568;
      text-decoration: none;
      transition: all 0.3s ease;
      border-left: 4px solid transparent;
    }
    
    .nav-link:hover {
      background: rgba(79, 172, 254, 0.1);
      color: #4facfe;
      border-left-color: #4facfe;
    }
    
    .nav-link.active {
      background: rgba(79, 172, 254, 0.1);
      color: #4facfe;
      border-left-color: #4facfe;
    }
    
    .nav-icon {
      margin-right: 1rem;
      font-size: 1.2rem;
    }
    
    /* Main Content */
    .main-content {
      flex: 1;
      margin-left: 250px;
      padding: 2rem;
      transition: margin-left 0.3s ease;
    }
    
    .content {
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    /* Mobile Toggle */
    .mobile-toggle {
      display: none;
      position: fixed;
      top: 1rem;
      left: 1rem;
      z-index: 1100;
      background: #4facfe;
      color: white;
      border: none;
      padding: 0.5rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.5rem;
    }
    
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 900;
    }
    
    /* Mobile Styles */
    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-100%);
      }
      
      .sidebar.active {
        transform: translateX(0);
      }
      
      .main-content {
        margin-left: 0;
      }
      
      .mobile-toggle {
        display: block;
      }
      
      .overlay.active {
        display: block;
      }
    }
    
    /* Demo Content */
    h1 {
      color: #2d3748;
      margin-bottom: 1rem;
    }
    
    p {
      color: #4a5568;
      line-height: 1.7;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <!-- Mobile Toggle -->
  <button class="mobile-toggle" id="menuToggle">☰</button>
  
  <!-- Overlay -->
  <div class="overlay" id="overlay"></div>
  
  <!-- Sidebar -->
  <nav class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <a href="#" class="logo">Sidebar</a>
    </div>
    
    <ul class="sidebar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">
          <span class="nav-icon">🏠</span>
          Dashboard
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-icon">📊</span>
          Analytics
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-icon">👥</span>
          Users
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-icon">⚙️</span>
          Settings
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-icon">📁</span>
          Projects
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-icon">🔒</span>
          Security
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-icon">📞</span>
          Support
        </a>
      </li>
    </ul>
  </nav>
  
  <!-- Main Content -->
  <main class="main-content">
    <div class="content">
      <h1>Responsive Sidebar Navigation</h1>
      <p>This layout features a sidebar navigation that transforms into an off-canvas menu on mobile devices. The sidebar remains fixed on desktop while the main content area adjusts accordingly.</p>
      <p>On mobile devices, click the hamburger icon to toggle the sidebar. The overlay ensures proper focus management and usability.</p>
      <p>Resize your browser to see the responsive behavior in action!</p>
    </div>
  </main>

  <script>
    const menuToggle = document.getElementById('menuToggle');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    
    menuToggle.addEventListener('click', () => {
      sidebar.classList.toggle('active');
      overlay.classList.toggle('active');
    });
    
    overlay.addEventListener('click', () => {
      sidebar.classList.remove('active');
      overlay.classList.remove('active');
    });
    
    // Close sidebar when clicking on a link (mobile)
    document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 768) {
          sidebar.classList.remove('active');
          overlay.classList.remove('active');
        }
      });
    });
  </script>
</body>
</html>

Advanced Navigation Techniques

Sticky Navigation with Scroll Effects

Create engaging navigation that responds to scroll position with background changes and shadow effects.

.navbar {
  position: sticky;
  top: 0;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

Responsive Dropdown Menus

Create dropdowns that work on both hover (desktop) and click (mobile) with smooth animations.

/* Desktop hover */
@media (min-width: 769px) {
  .nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Mobile click */
@media (max-width: 768px) {
  .dropdown {
    position: static;
    display: none;
  }
  .dropdown.active { display: block; }
}

Responsive Search Integration

Implement search functionality that adapts from expanded form to search icon on mobile.

/* Desktop search */
.search-form {
  width: 300px;
}

/* Mobile search */
@media (max-width: 768px) {
  .search-form {
    width: 0;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .search-form.active {
    width: 100%;
    opacity: 1;
  }
}

Complete Responsive Navigation System

Advanced Navigation with All Features

This comprehensive example includes sticky navigation, dropdown menus, mobile adaptation, scroll effects, and responsive breakpoints.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complete Responsive Navigation System</title>
  <style>
    :root {
      --primary-color: #3b82f6;
      --secondary-color: #8b5cf6;
      --accent-color: #ec4899;
      --dark-color: #1f2937;
      --light-color: #f8fafc;
      --text-color: #374151;
      --border-color: #e5e7eb;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      min-height: 100vh;
    }
    
    /* Advanced Navbar */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-color);
      padding: 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition);
    }
    
    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.98);
      box-shadow: var(--shadow-lg);
      padding: 0.5rem 0;
    }
    
    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: 800;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: none;
    }
    
    .nav-menu {
      display: flex;
      list-style: none;
      gap: 0.5rem;
      align-items: center;
    }
    
    .nav-item {
      position: relative;
    }
    
    .nav-link {
      text-decoration: none;
      color: var(--text-color);
      font-weight: 500;
      padding: 0.75rem 1.25rem;
      border-radius: 12px;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .nav-link:hover {
      color: var(--primary-color);
      background: rgba(59, 130, 246, 0.1);
      transform: translateY(-1px);
    }
    
    .nav-link.active {
      color: var(--primary-color);
      background: rgba(59, 130, 246, 0.1);
    }
    
    /* Dropdown Menu */
    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background: white;
      min-width: 200px;
      box-shadow: var(--shadow-lg);
      border-radius: 12px;
      padding: 0.5rem;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: var(--transition);
      z-index: 1001;
    }
    
    .nav-item:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .dropdown-link {
      display: block;
      padding: 0.75rem 1rem;
      color: var(--text-color);
      text-decoration: none;
      border-radius: 8px;
      transition: var(--transition);
    }
    
    .dropdown-link:hover {
      background: rgba(59, 130, 246, 0.1);
      color: var(--primary-color);
    }
    
    /* CTA Button */
    .nav-cta {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      margin-left: 1rem;
    }
    
    .nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
    }
    
    /* Mobile Menu */
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 4px;
      padding: 0.5rem;
      border-radius: 8px;
      background: rgba(59, 130, 246, 0.1);
    }
    
    .hamburger span {
      width: 20px;
      height: 2px;
      background: var(--text-color);
      transition: var(--transition);
      border-radius: 1px;
    }
    
    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* Main Content */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }
    
    .hero {
      text-align: center;
      padding: 4rem 0;
    }
    
    .hero h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 800;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .hero p {
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      color: var(--text-color);
      max-width: 600px;
      margin: 0 auto 2rem;
    }
    
    /* Features Grid */
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 4rem 0;
    }
    
    .feature-card {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: var(--shadow);
      transition: var(--transition);
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }
    
    /* Mobile Styles */
    @media (max-width: 1024px) {
      .nav-menu {
        gap: 0.25rem;
      }
      
      .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
      }
    }
    
    @media (max-width: 768px) {
      .hamburger {
        display: flex;
      }
      
      .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background: white;
        width: 100%;
        height: calc(100vh - 80px);
        transition: var(--transition);
        box-shadow: var(--shadow-lg);
        padding: 2rem;
        gap: 0;
        overflow-y: auto;
      }
      
      .nav-menu.active {
        left: 0;
      }
      
      .nav-item {
        width: 100%;
        margin-bottom: 0.5rem;
      }
      
      .nav-link {
        padding: 1rem;
        border-radius: 8px;
        justify-content: flex-start;
      }
      
      .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--light-color);
        margin: 0.5rem 0;
        display: none;
      }
      
      .dropdown-menu.active {
        display: block;
      }
      
      .nav-cta {
        margin: 1rem 0 0 0;
        text-align: center;
        display: block;
      }
    }
    
    /* Breakpoint Indicator */
    .breakpoint-indicator {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--dark-color);
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-family: monospace;
      font-size: 0.75rem;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <div class="breakpoint-indicator" id="breakpoint">Desktop</div>
  
  <!-- Navigation -->
  <nav class="navbar" id="navbar">
    <div class="nav-container">
      <a href="#" class="logo">NavSystem</a>
      
      <ul class="nav-menu" id="navMenu">
        <li class="nav-item">
          <a href="#" class="nav-link active">🏠 Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">📊 Features</a>
          <div class="dropdown-menu">
            <a href="#" class="dropdown-link">Analytics</a>
            <a href="#" class="dropdown-link">Reports</a>
            <a href="#" class="dropdown-link">Dashboard</a>
            <a href="#" class="dropdown-link">Insights</a>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">👥 About</a>
          <div class="dropdown-menu">
            <a href="#" class="dropdown-link">Our Team</a>
            <a href="#" class="dropdown-link">Company</a>
            <a href="#" class="dropdown-link">Careers</a>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">📞 Contact</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">⚙️ Settings</a>
        </li>
        <a href="#" class="nav-cta">Get Started</a>
      </ul>
      
      <div class="hamburger" id="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </nav>
  
  <!-- Main Content -->
  <div class="container">
    <section class="hero">
      <h1>Complete Navigation System</h1>
      <p>A fully responsive navigation system with dropdown menus, smooth animations, and mobile-first design.</p>
    </section>
    
    <div class="features">
      <div class="feature-card">
        <h3>Responsive Design</h3>
        <p>Adapts seamlessly to all screen sizes with optimized layouts for each breakpoint.</p>
      </div>
      <div class="feature-card">
        <h3>Smooth Animations</h3>
        <p>CSS transitions and transforms create engaging user interactions.</p>
      </div>
      <div class="feature-card">
        <h3>Accessibility First</h3>
        <p>Built with keyboard navigation and screen reader support in mind.</p>
      </div>
    </div>
  </div>

  <script>
    // Mobile menu toggle
    const hamburger = document.getElementById('hamburger');
    const navMenu = document.getElementById('navMenu');
    
    hamburger.addEventListener('click', () => {
      hamburger.classList.toggle('active');
      navMenu.classList.toggle('active');
    });
    
    // Dropdown functionality for mobile
    const dropdownItems = document.querySelectorAll('.nav-item');
    
    dropdownItems.forEach(item => {
      const dropdown = item.querySelector('.dropdown-menu');
      
      if (dropdown) {
        const link = item.querySelector('.nav-link');
        
        link.addEventListener('click', (e) => {
          if (window.innerWidth <= 768) {
            e.preventDefault();
            dropdown.classList.toggle('active');
          }
        });
      }
    });
    
    // Navbar scroll effect
    const navbar = document.getElementById('navbar');
    
    window.addEventListener('scroll', () => {
      if (window.scrollY > 100) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
    });
    
    // Breakpoint indicator
    function updateBreakpointIndicator() {
      const width = window.innerWidth;
      const indicator = document.getElementById('breakpoint');
      
      if (width >= 1200) {
        indicator.textContent = "Desktop (≥1200px)";
      } else if (width >= 1024) {
        indicator.textContent = "Large Tablet (≥1024px)";
      } else if (width >= 768) {
        indicator.textContent = "Tablet (≥768px)";
      } else {
        indicator.textContent = "Mobile (<768px)";
      }
    }
    
    updateBreakpointIndicator();
    window.addEventListener('resize', updateBreakpointIndicator);
  </script>
</body>
</html>

Responsive Navigation Best Practices

✅ Do

  • Design mobile-first
  • Use semantic HTML structure
  • Ensure touch-friendly target sizes
  • Implement keyboard navigation
  • Test with screen readers
  • Use progressive enhancement
  • Optimize for performance
  • Provide clear visual feedback

❌ Don't

  • Hide critical navigation behind hamburgers
  • Use hover-only interactions on mobile
  • Create complex mega menus on mobile
  • Forget about loading performance
  • Ignore accessibility guidelines
  • Use tiny touch targets
  • Implement confusing animations
  • Break browser navigation

Master Responsive Navigation Today!

Experiment with our comprehensive navigation examples that showcase different patterns, from simple hamburger menus to complex mega menus and sidebar navigation systems.

< PreviousNext >