Code Snippets Hub
Category · Navigation Menus Difficulty Level · Intermediate Published on · January 20, 2024

Modern Navigation Menu

Responsive navigation menu with smooth animations, mobile hamburger menu, and modern design patterns

#navigation #menu #responsive #animation #mobile #hamburger

Responsive Design

Yes

Dark Mode Support

No

lines

11

Browser Compatibility

No

Live Preview

Interact with the component without leaving the page.

400px

Modern Navigation Menu

A fully responsive navigation menu with smooth animations, mobile hamburger menu, dropdown submenus, and modern design patterns. Perfect for any website or web application.

Features

  • Responsive Design: Adapts to all screen sizes
  • Mobile Hamburger Menu: Animated hamburger icon with slide-out menu
  • Dropdown Submenus: Multi-level navigation support
  • Smooth Animations: CSS transitions and transforms
  • Active State Indicators: Visual feedback for current page
  • Search Integration: Built-in search functionality
  • Theme Support: Light and dark mode compatibility
  • Accessibility: Full keyboard navigation and ARIA support
<nav class="modern-nav">
  <div class="nav-container">
    <!-- Logo -->
    <div class="nav-logo">
      <a href="#" class="logo-link">
        <svg class="logo-icon" viewBox="0 0 24 24" fill="none">
          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="logo-text">ModernNav</span>
      </a>
    </div>

    <!-- Desktop Navigation -->
    <div class="nav-menu">
      <ul class="nav-list">
        <li class="nav-item">
          <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item has-dropdown">
          <a href="#" class="nav-link">Products
            <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none">
              <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-link">Web Design</a></li>
            <li><a href="#" class="dropdown-link">Mobile Apps</a></li>
            <li><a href="#" class="dropdown-link">E-commerce</a></li>
            <li class="has-submenu">
              <a href="#" class="dropdown-link">Development
                <svg class="submenu-icon" viewBox="0 0 24 24" fill="none">
                  <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
              <ul class="submenu">
                <li><a href="#" class="submenu-link">Frontend</a></li>
                <li><a href="#" class="submenu-link">Backend</a></li>
                <li><a href="#" class="submenu-link">Full Stack</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
        </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>

    <!-- Search Bar -->
    <div class="nav-search">
      <div class="search-container">
        <input type="text" class="search-input" placeholder="Search...">
        <button class="search-button">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
            <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Theme Toggle -->
    <button class="theme-toggle" aria-label="Toggle theme">
      <svg class="sun-icon" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
        <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <svg class="moon-icon" viewBox="0 0 24 24" fill="none">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>

    <!-- Mobile Menu Toggle -->
    <button class="mobile-toggle" aria-label="Toggle mobile menu">
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
    </button>
  </div>

  <!-- Mobile Menu Overlay -->
  <div class="mobile-menu-overlay">
    <div class="mobile-menu">
      <div class="mobile-search">
        <input type="text" class="mobile-search-input" placeholder="Search...">
        <button class="mobile-search-button">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
            <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
      
      <ul class="mobile-nav-list">
        <li class="mobile-nav-item">
          <a href="#" class="mobile-nav-link active">Home</a>
        </li>
        <li class="mobile-nav-item has-mobile-dropdown">
          <button class="mobile-nav-link mobile-dropdown-toggle">
            Products
            <svg class="mobile-dropdown-icon" viewBox="0 0 24 24" fill="none">
              <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <ul class="mobile-dropdown">
            <li><a href="#" class="mobile-dropdown-link">Web Design</a></li>
            <li><a href="#" class="mobile-dropdown-link">Mobile Apps</a></li>
            <li><a href="#" class="mobile-dropdown-link">E-commerce</a></li>
            <li class="has-mobile-submenu">
              <button class="mobile-dropdown-link mobile-submenu-toggle">
                Development
                <svg class="mobile-submenu-icon" viewBox="0 0 24 24" fill="none">
                  <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
              <ul class="mobile-submenu">
                <li><a href="#" class="mobile-submenu-link">Frontend</a></li>
                <li><a href="#" class="mobile-submenu-link">Backend</a></li>
                <li><a href="#" class="mobile-submenu-link">Full Stack</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="mobile-nav-item">
          <a href="#" class="mobile-nav-link">Services</a>
        </li>
        <li class="mobile-nav-item">
          <a href="#" class="mobile-nav-link">About</a>
        </li>
        <li class="mobile-nav-item">
          <a href="#" class="mobile-nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
:root {
  --nav-bg: #ffffff;
  --nav-text: #1a202c;
  --nav-text-hover: #667eea;
  --nav-border: #e2e8f0;
  --nav-shadow: rgba(0, 0, 0, 0.1);
  --dropdown-bg: #ffffff;
  --dropdown-shadow: rgba(0, 0, 0, 0.15);
  --mobile-overlay: rgba(0, 0, 0, 0.5);
  --search-bg: #f7fafc;
  --search-border: #e2e8f0;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --nav-bg: #1a202c;
  --nav-text: #f7fafc;
  --nav-text-hover: #90cdf4;
  --nav-border: #2d3748;
  --nav-shadow: rgba(0, 0, 0, 0.3);
  --dropdown-bg: #2d3748;
  --dropdown-shadow: rgba(0, 0, 0, 0.4);
  --mobile-overlay: rgba(0, 0, 0, 0.8);
  --search-bg: #2d3748;
  --search-border: #4a5568;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.modern-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 2px 10px var(--nav-shadow);
  z-index: 1000;
  transition: var(--transition);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* Logo */
.nav-logo .logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--nav-text);
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  margin-right: 0.5rem;
  color: var(--nav-text-hover);
}

.logo-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Desktop Navigation */
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  margin: 0 0.5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  border-radius: 8px;
  transition: var(--transition);
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--nav-text-hover);
  background: rgba(102, 126, 234, 0.1);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--nav-text-hover);
  border-radius: 1px;
}

.dropdown-icon {
  width: 16px;
  height: 16px;
  margin-left: 0.25rem;
  transition: var(--transition);
}

/* Dropdown Menu */
.has-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: 0 10px 40px var(--dropdown-shadow);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition);
  z-index: 100;
  list-style: none;
  padding: 0.5rem 0;
}

.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  color: var(--nav-text);
  text-decoration: none;
  transition: var(--transition);
}

.dropdown-link:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--nav-text-hover);
}

/* Submenu */
.submenu-icon {
  width: 14px;
  height: 14px;
}

.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: 0 10px 40px var(--dropdown-shadow);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: var(--transition);
  list-style: none;
  padding: 0.5rem 0;
}

.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-link {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--nav-text);
  text-decoration: none;
  transition: var(--transition);
}

.submenu-link:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--nav-text-hover);
}

/* Search */
.nav-search {
  margin: 0 1rem;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 250px;
  padding: 0.5rem 1rem;
  padding-right: 2.5rem;
  background: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: 25px;
  color: var(--nav-text);
  font-size: 0.875rem;
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--nav-text-hover);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-button {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  transition: var(--transition);
}

.search-button:hover {
  color: var(--nav-text-hover);
  background: rgba(102, 126, 234, 0.1);
}

.search-button svg {
  width: 18px;
  height: 18px;
}

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: var(--transition);
  position: relative;
  margin: 0 0.5rem;
}

.theme-toggle:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--nav-text-hover);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: var(--transition);
}

.moon-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

[data-theme="dark"] .sun-icon {
  transform: scale(0);
  opacity: 0;
}

[data-theme="dark"] .moon-icon {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: var(--transition);
}

.mobile-toggle:hover {
  background: rgba(102, 126, 234, 0.1);
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--nav-text);
  margin: 3px 0;
  transition: var(--transition);
  border-radius: 1px;
}

.mobile-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.mobile-menu-overlay {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mobile-overlay);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 999;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  background: var(--nav-bg);
  height: 100%;
  width: 300px;
  transform: translateX(-100%);
  transition: var(--transition);
  overflow-y: auto;
  padding: 1rem;
}

.mobile-menu-overlay.active .mobile-menu {
  transform: translateX(0);
}

.mobile-search {
  margin-bottom: 2rem;
  position: relative;
}

.mobile-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  background: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: 12px;
  color: var(--nav-text);
  font-size: 1rem;
}

.mobile-search-button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
}

.mobile-search-button svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-list {
  list-style: none;
}

.mobile-nav-item {
  margin-bottom: 0.5rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 12px;
  transition: var(--transition);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: rgba(102, 126, 234, 0.1);
  color: var(--nav-text-hover);
}

.mobile-dropdown-icon,
.mobile-submenu-icon {
  width: 16px;
  height: 16px;
  transition: var(--transition);
}

.mobile-dropdown,
.mobile-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: var(--transition);
  margin-left: 1rem;
}

.mobile-dropdown.active,
.mobile-submenu.active {
  max-height: 300px;
}

.mobile-dropdown-link,
.mobile-submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 8px;
  transition: var(--transition);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-dropdown-link:hover,
.mobile-submenu-link:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--nav-text-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-menu,
  .nav-search,
  .theme-toggle {
    display: none;
  }
  
  .mobile-toggle {
    display: flex;
  }
  
  .search-input {
    width: 200px;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 0.5rem;
  }
  
  .logo-text {
    display: none;
  }
  
  .mobile-menu {
    width: 100%;
  }
}
class ModernNavigation {
  constructor() {
    this.nav = document.querySelector('.modern-nav');
    this.mobileToggle = document.querySelector('.mobile-toggle');
    this.mobileOverlay = document.querySelector('.mobile-menu-overlay');
    this.themeToggle = document.querySelector('.theme-toggle');
    this.dropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle');
    this.submenuToggles = document.querySelectorAll('.mobile-submenu-toggle');
    this.searchInputs = document.querySelectorAll('.search-input, .mobile-search-input');
    
    this.init();
  }

  init() {
    this.setupMobileMenu();
    this.setupThemeToggle();
    this.setupDropdowns();
    this.setupSearch();
    this.setupScrollEffect();
    this.setupKeyboardNavigation();
  }

  setupMobileMenu() {
    this.mobileToggle.addEventListener('click', () => {
      this.toggleMobileMenu();
    });

    this.mobileOverlay.addEventListener('click', (e) => {
      if (e.target === this.mobileOverlay) {
        this.closeMobileMenu();
      }
    });

    // Close mobile menu on escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.mobileOverlay.classList.contains('active')) {
        this.closeMobileMenu();
      }
    });
  }

  toggleMobileMenu() {
    this.mobileToggle.classList.toggle('active');
    this.mobileOverlay.classList.toggle('active');
    document.body.style.overflow = this.mobileOverlay.classList.contains('active') ? 'hidden' : '';
  }

  closeMobileMenu() {
    this.mobileToggle.classList.remove('active');
    this.mobileOverlay.classList.remove('active');
    document.body.style.overflow = '';
  }

  setupThemeToggle() {
    // Check for saved theme preference or default to light
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);

    this.themeToggle.addEventListener('click', () => {
      const currentTheme = document.documentElement.getAttribute('data-theme');
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      
      document.documentElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
      
      // Add animation class
      this.themeToggle.style.transform = 'scale(0.8)';
      setTimeout(() => {
        this.themeToggle.style.transform = 'scale(1)';
      }, 150);
    });
  }

  setupDropdowns() {
    this.dropdownToggles.forEach(toggle => {
      toggle.addEventListener('click', (e) => {
        e.preventDefault();
        const dropdown = toggle.nextElementSibling;
        const icon = toggle.querySelector('.mobile-dropdown-icon');
        
        dropdown.classList.toggle('active');
        icon.style.transform = dropdown.classList.contains('active') 
          ? 'rotate(180deg)' 
          : 'rotate(0deg)';
      });
    });

    this.submenuToggles.forEach(toggle => {
      toggle.addEventListener('click', (e) => {
        e.preventDefault();
        const submenu = toggle.nextElementSibling;
        const icon = toggle.querySelector('.mobile-submenu-icon');
        
        submenu.classList.toggle('active');
        icon.style.transform = submenu.classList.contains('active') 
          ? 'rotate(180deg)' 
          : 'rotate(0deg)';
      });
    });
  }

  setupSearch() {
    this.searchInputs.forEach(input => {
      input.addEventListener('input', (e) => {
        this.handleSearch(e.target.value);
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          e.preventDefault();
          this.performSearch(e.target.value);
        }
      });
    });

    // Search button functionality
    document.querySelectorAll('.search-button, .mobile-search-button').forEach(button => {
      button.addEventListener('click', () => {
        const input = button.previousElementSibling || button.parentElement.querySelector('input');
        this.performSearch(input.value);
      });
    });
  }

  handleSearch(query) {
    // Real-time search suggestions (implement as needed)
    if (query.length > 2) {
      // Show search suggestions
      console.log('Searching for:', query);
    }
  }

  performSearch(query) {
    if (query.trim()) {
      console.log('Performing search for:', query);
      // Implement actual search functionality
      this.showSearchResults(query);
    }
  }

  showSearchResults(query) {
    // Create and show search results
    const notification = this.createNotification(`Searching for "${query}"...`);
    document.body.appendChild(notification);
    
    setTimeout(() => {
      notification.remove();
    }, 3000);
  }

  setupScrollEffect() {
    let lastScrollY = window.scrollY;
    
    window.addEventListener('scroll', () => {
      const currentScrollY = window.scrollY;
      
      if (currentScrollY > 100) {
        this.nav.style.background = 'rgba(255, 255, 255, 0.95)';
        this.nav.style.backdropFilter = 'blur(10px)';
      } else {
        this.nav.style.background = 'var(--nav-bg)';
        this.nav.style.backdropFilter = 'none';
      }
      
      // Hide/show nav on scroll
      if (currentScrollY > lastScrollY && currentScrollY > 100) {
        this.nav.style.transform = 'translateY(-100%)';
      } else {
        this.nav.style.transform = 'translateY(0)';
      }
      
      lastScrollY = currentScrollY;
    });
  }

  setupKeyboardNavigation() {
    const navLinks = document.querySelectorAll('.nav-link, .dropdown-link, .submenu-link');
    
    navLinks.forEach(link => {
      link.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          link.click();
        }
      });
    });
  }

  createNotification(message) {
    const notification = document.createElement('div');
    notification.style.cssText = `
      position: fixed;
      top: 90px;
      right: 20px;
      background: var(--nav-bg);
      color: var(--nav-text);
      padding: 1rem 1.5rem;
      border-radius: 8px;
      box-shadow: 0 4px 12px var(--nav-shadow);
      border: 1px solid var(--nav-border);
      z-index: 1001;
      animation: slideIn 0.3s ease;
    `;
    notification.textContent = message;
    return notification;
  }

  // Public API methods
  setActiveLink(href) {
    document.querySelectorAll('.nav-link, .mobile-nav-link').forEach(link => {
      link.classList.remove('active');
      if (link.getAttribute('href') === href) {
        link.classList.add('active');
      }
    });
  }

  updateSearchPlaceholder(placeholder) {
    this.searchInputs.forEach(input => {
      input.placeholder = placeholder;
    });
  }
}

// Add notification animation styles
const style = document.createElement('style');
style.textContent = `
  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
`;
document.head.appendChild(style);

// Initialize navigation
document.addEventListener('DOMContentLoaded', () => {
  window.modernNav = new ModernNavigation();
});

Usage Examples

Basic Implementation

// Navigation is automatically initialized
const nav = window.modernNav;
// Programmatically set active navigation link
modernNav.setActiveLink('/products');

Custom Search Handler

// Override search functionality
modernNav.performSearch = function(query) {
  // Custom search implementation
  window.location.href = `/search?q=${encodeURIComponent(query)}`;
};

API Methods

  • setActiveLink(href) - Set active navigation link
  • updateSearchPlaceholder(text) - Update search input placeholder
  • toggleMobileMenu() - Toggle mobile menu visibility
  • closeMobileMenu() - Close mobile menu

Customization Options

  • Colors: Modify CSS custom properties for theming
  • Logo: Replace SVG logo with your brand
  • Menu Items: Add/remove navigation items
  • Animations: Adjust transition timings and effects
  • Breakpoints: Customize responsive behavior

Accessibility Features

  • Full keyboard navigation support
  • ARIA labels and roles
  • Screen reader compatible
  • Focus indicators
  • High contrast support

Browser Support

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

Performance

  • Lightweight CSS animations
  • Efficient event handling
  • Optimized for mobile devices
  • Minimal JavaScript footprint

This modern navigation menu provides a complete solution for website navigation with smooth animations, responsive design, and excellent user experience across all devices.

HTML

4

lines

CSS

7

lines


                <div class="navigation-container">
  <h2>Modern Navigation Menu</h2>
  <p>Responsive navigation with smooth animations</p>
</div>
4lines
130characters
HTMLLanguage

Related Code Snippets

Explore template packs

Need larger building blocks? Browse responsive landing pages and component bundles.

Open HTML Template Library →