Labs ICT

Build a Navbar

← HTML Audio
Build a Landing Page →

Build a Navbar Project

In this project, you'll learn how to create a responsive navigation bar using HTML and CSS. A navbar is one of the most common components in web design, appearing on almost every website.

Project Overview

We'll build a modern navigation bar with:

  • Logo/brand name
  • Navigation links
  • Responsive design for mobile
  • Clean, professional styling

Step 1: Basic HTML Structure

Start with the semantic HTML structure for your navbar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Project</title>
</head>
<body>
  <nav>
    <div class="navbar-container">
      <div class="navbar-brand">
        <a href="#">MyWebsite</a>
      </div>
      <ul class="navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
  
  <main>
    <h1>Welcome to My Website</h1>
    <p>This is a demonstration of a responsive navbar.</p>
  </main>
</body>
</html>

Step 2: Basic CSS Styling

Add CSS to style your navbar with a clean, modern look:

/* Basic reset and body styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Navbar container */
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

/* Brand/logo */
.navbar-brand a {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.navbar-brand a:hover {
  color: #ddd;
}

/* Navigation menu */
.navbar-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.navbar-menu a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.navbar-menu a:hover {
  background-color: #555;
}

/* Main content */
main {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

Step 3: Add Dropdown Menu

Create a dropdown menu for the Services link:

<ul class="navbar-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="dropdown">
    <a href="#">Services </a>
    <ul class="dropdown-menu">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Development</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
/* Dropdown styles */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  min-width: 200px;
  list-style: none;
  padding: 0.5rem 0;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color: #555;
}

Step 4: Add Mobile Menu Toggle

Create a hamburger menu for mobile devices:

<div class="navbar-container">
  <div class="navbar-brand">
    <a href="#">MyWebsite</a>
  </div>
  
  <button class="mobile-menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </button>
  
  <ul class="navbar-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="dropdown">
      <a href="#">Services </a>
      <ul class="dropdown-menu">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Development</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Marketing</a></li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.3s;
}

/* Mobile styles */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .navbar-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #333;
    flex-direction: column;
    padding: 1rem 0;
  }
  
  .navbar-menu.active {
    display: flex;
  }
  
  .dropdown-menu {
    position: static;
    box-shadow: none;
    background-color: #444;
    margin-left: 1rem;
  }
}

Step 5: Add JavaScript for Mobile Menu

Add JavaScript to make the mobile menu functional:

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
  const mobileToggle = document.querySelector('.mobile-menu-toggle');
  const navbarMenu = document.querySelector('.navbar-menu');
  
  if (mobileToggle && navbarMenu) {
    mobileToggle.addEventListener('click', function() {
      navbarMenu.classList.toggle('active');
    });
  }
  
  // Close menu when clicking outside
  document.addEventListener('click', function(event) {
    if (!event.target.closest('.navbar-container')) {
      navbarMenu.classList.remove('active');
    }
  });
});

Step 6: Add Active Link Highlighting

Highlight the current page link:

/* Active link styling */
.navbar-menu a.active,
.navbar-menu a:hover {
  background-color: #555;
}

/* Current page indicator */
.navbar-menu a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: #4CAF50;
}
// Highlight active link
document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname;
  const navLinks = document.querySelectorAll('.navbar-menu a');
  
  navLinks.forEach(link => {
    if (link.getAttribute('href') === currentPath) {
      link.classList.add('active');
    }
  });
});

Step 7: Add Search Bar

Include a search functionality in your navbar:

<div class="navbar-container">
  <div class="navbar-brand">
    <a href="#">MyWebsite</a>
  </div>
  
  <div class="navbar-search">
    <input type="search" placeholder="Search...">
    <button type="submit">Search</button>
  </div>
  
  <button class="mobile-menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </button>
  
  <ul class="navbar-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
/* Search bar styles */
.navbar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-search input {
  padding: 0.5rem;
  border: none;
  border-radius: 4px;
  background-color: #555;
  color: white;
}

.navbar-search input::placeholder {
  color: #ccc;
}

.navbar-search button {
  padding: 0.5rem 1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.navbar-search button:hover {
  background-color: #45a049;
}

@media (max-width: 768px) {
  .navbar-search {
    display: none;
  }
}

Step 8: Final Touches and Accessibility

Add accessibility features and final styling:

<nav role="navigation" aria-label="Main navigation">
  <div class="navbar-container">
    <div class="navbar-brand">
      <a href="#" aria-label="MyWebsite homepage">MyWebsite</a>
    </div>
    
    <button class="mobile-menu-toggle" 
            aria-label="Toggle navigation menu" 
            aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </button>
    
    <ul class="navbar-menu">
      <li><a href="#" aria-current="page">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="dropdown">
        <a href="#" aria-haspopup="true" aria-expanded="false">Services </a>
        <ul class="dropdown-menu" aria-label="Services submenu">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">SEO</a></li>
          <li><a href="#">Marketing</a></li>
        </ul>
      </li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
/* Focus styles for accessibility */
.navbar-menu a:focus,
.mobile-menu-toggle:focus,
.navbar-search input:focus,
.navbar-search button:focus {
  outline: 2px solid #4CAF50;
  outline-offset: 2px;
}

/* Smooth transitions */
.navbar-menu a,
.mobile-menu-toggle span,
.navbar-search button {
  transition: all 0.3s ease;
}

/* Improved mobile experience */
@media (max-width: 768px) {
  .navbar-container {
    flex-wrap: wrap;
  }
  
  .navbar-brand {
    order: 1;
  }
  
  .mobile-menu-toggle {
    order: 2;
  }
  
  .navbar-menu {
    order: 3;
  }
}

Complete Code

Here's the complete, copy-and-paste ready code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Project</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }
    
    .navbar-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background-color: #333;
      color: white;
    }
    
    .navbar-brand a {
      font-size: 1.5rem;
      font-weight: bold;
      color: white;
      text-decoration: none;
    }
    
    .navbar-brand a:hover {
      color: #ddd;
    }
    
    .navbar-menu {
      display: flex;
      list-style: none;
      gap: 2rem;
    }
    
    .navbar-menu a {
      color: white;
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    
    .navbar-menu a:hover {
      background-color: #555;
    }
    
    .dropdown {
      position: relative;
    }
    
    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #333;
      min-width: 200px;
      list-style: none;
      padding: 0.5rem 0;
      border-radius: 4px;
      display: none;
    }
    
    .dropdown:hover .dropdown-menu {
      display: block;
    }
    
    .dropdown-menu a {
      display: block;
      padding: 0.5rem 1rem;
    }
    
    .mobile-menu-toggle {
      display: none;
      flex-direction: column;
      background: none;
      border: none;
      cursor: pointer;
    }
    
    .mobile-menu-toggle span {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 3px 0;
    }
    
    @media (max-width: 768px) {
      .mobile-menu-toggle {
        display: flex;
      }
      
      .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #333;
        flex-direction: column;
        padding: 1rem 0;
      }
      
      .navbar-menu.active {
        display: flex;
      }
    }
    
    main {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <nav>
    <div class="navbar-container">
      <div class="navbar-brand">
        <a href="#">MyWebsite</a>
      </div>
      
      <button class="mobile-menu-toggle">
        <span></span>
        <span></span>
        <span></span>
      </button>
      
      <ul class="navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a href="#">Services </a>
          <ul class="dropdown-menu">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Marketing</a></li>
          </ul>
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
  
  <main>
    <h1>Welcome to My Website</h1>
    <p>This is a demonstration of a responsive navbar with dropdown menus and mobile support.</p>
  </main>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const mobileToggle = document.querySelector('.mobile-menu-toggle');
      const navbarMenu = document.querySelector('.navbar-menu');
      
      if (mobileToggle && navbarMenu) {
        mobileToggle.addEventListener('click', function() {
          navbarMenu.classList.toggle('active');
        });
      }
    });
  </script>
</body>
</html>

Project Summary

Congratulations! You've built a professional navigation bar with:

  • Responsive design for all screen sizes
  • Dropdown menus for nested navigation
  • Mobile hamburger menu
  • Clean, modern styling
  • Accessibility features
  • Interactive JavaScript functionality

Next Steps:

  • Add more styling and animations
  • Implement sticky positioning
  • Add multi-level dropdowns
  • Create different navbar variations

🧪 Quick Quiz

Which HTML element is used to create dropdown menus in a navbar?

← HTML Audio
Build a Landing Page →