Creating a Navigation Bar

Navigation bars are one of the most important elements on any website—they help users explore your content. In this tutorial, you’ll learn how to build a professional, responsive navigation bar from scratch!

A navigation bar (navbar) is typically the first thing users see when they visit your website. It helps them:

Find important pages quickly
Understand your site’s structure
Navigate between different sections
Access key features or actions

Good navigation = Better user experience = More engaged visitors!

The foundation of every navbar is the <nav> element with a list of links:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Navbar</title>
</head>
<body>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
</body>
</html>

This creates a functional navigation bar, but it doesn’t look very good yet. Let’s add some styling!

Let’s transform the basic vertical list into a horizontal navbar:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  nav {
    background-color: #333;
    padding: 1rem;
  }

  nav ul {
    list-style-type: none;
    display: flex;
    gap: 2rem;
  }

  nav a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
  }

  nav a:hover {
    color: #4CAF50;
  }
</style>
</head>
<body>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main style="padding: 2rem;">
  <h1>Welcome to Our Website</h1>
  <p>This is the main content area.</p>
</main>
</body>
</html>

Key CSS concepts:

list-style-type: none removes bullet points
display: flex makes the list horizontal
gap: 2rem adds space between items
:hover provides visual feedback

Most websites have a logo on the left and links on the right:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar with Logo</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  nav {
    background-color: #2c3e50;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
  }

  nav ul {
    list-style-type: none;
    display: flex;
    gap: 2rem;
  }

  nav ul a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
  }

  nav ul a:hover {
    color: #3498db;
  }
</style>
</head>
<body>
<nav>
  <a href="/" class="logo">MyBrand</a>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
</body>
</html>

Make the navbar stay at the top when scrolling:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

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

  nav {
    background-color: #1a1a1a;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  .logo {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
  }

  nav ul {
    list-style-type: none;
    display: flex;
    gap: 2rem;
  }

  nav ul a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
  }

  nav ul a:hover {
    color: #FFD700;
  }

  main {
    padding: 2rem;
    min-height: 200vh; /* Makes page scrollable */
  }
</style>
</head>
<body>
<nav>
  <a href="/" class="logo">StickyNav</a>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>Scroll Down to See Sticky Navigation</h1>
  <p>The navigation bar will stay at the top of the page as you scroll!</p>
</main>
</body>
</html>

Key properties:

position: sticky — Sticks to the top when scrolling
top: 0 — Sticks at the very top
z-index: 100 — Ensures navbar stays above other content

For mobile devices, we need a hamburger menu. Here’s a CSS-only solution:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  nav {
    background-color: #34495e;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  .logo {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
  }

  nav ul {
    list-style-type: none;
    display: flex;
    gap: 2rem;
  }

  nav ul a {
    color: white;
    text-decoration: none;
    font-size: 16px;
  }

  nav ul a:hover {
    color: #1abc9c;
  }

  /* Hamburger menu */
  .menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
  }

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

  /* Mobile styles */
  @media (max-width: 768px) {
    .menu-toggle {
      display: flex;
    }

    nav ul {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #34495e;
      flex-direction: column;
      gap: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    nav ul li {
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    nav ul a {
      display: block;
      padding: 1rem 2rem;
    }

    /* Show menu when checkbox is checked */
    #menu-checkbox {
      display: none;
    }

    #menu-checkbox:checked ~ ul {
      max-height: 400px;
    }
  }
</style>
</head>
<body>
<nav>
  <a href="/" class="logo">ResponsiveNav</a>

  <label for="menu-checkbox" class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </label>

  <input type="checkbox" id="menu-checkbox">

  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/portfolio">Portfolio</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main style="padding: 2rem;">
  <h1>Responsive Navigation Bar</h1>
  <p>Resize your browser window to see the mobile menu!</p>
</main>
</body>
</html>

Add dropdown submenus for better organization:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar with Dropdown</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  nav {
    background-color: #2c3e50;
    padding: 0 2rem;
  }

  nav ul {
    list-style-type: none;
    display: flex;
  }

  nav > ul > li {
    position: relative;
  }

  nav a {
    color: white;
    text-decoration: none;
    padding: 1.5rem 1.5rem;
    display: block;
    transition: background-color 0.3s;
  }

  nav a:hover {
    background-color: #34495e;
  }

  /* Dropdown menu */
  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #34495e;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  nav li:hover .dropdown {
    opacity: 1;
    visibility: visible;
  }

  .dropdown li {
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .dropdown a {
    padding: 1rem 1.5rem;
  }

  .dropdown a:hover {
    background-color: #2c3e50;
  }
</style>
</head>
<body>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li>
      <a href="/services">Services</a>
      <ul class="dropdown">
        <li><a href="/services/web-design">Web Design</a></li>
        <li><a href="/services/development">Development</a></li>
        <li><a href="/services/seo">SEO</a></li>
        <li><a href="/services/consulting">Consulting</a></li>
      </ul>
    </li>
    <li>
      <a href="/products">Products</a>
      <ul class="dropdown">
        <li><a href="/products/software">Software</a></li>
        <li><a href="/products/hardware">Hardware</a></li>
        <li><a href="/products/accessories">Accessories</a></li>
      </ul>
    </li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main style="padding: 2rem;">
  <h1>Navigation with Dropdown Menus</h1>
  <p>Hover over "Services" or "Products" to see the dropdown!</p>
</main>
</body>
</html>

Active Page Highlighting

Highlight the current page in the navigation:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar with Active State</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  nav {
    background-color: #2c3e50;
    padding: 1rem 2rem;
  }

  nav ul {
    list-style-type: none;
    display: flex;
    gap: 0.5rem;
  }

  nav a {
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    transition: background-color 0.3s;
  }

  nav a:hover {
    background-color: rgba(255,255,255,0.1);
  }

  nav a.active {
    background-color: #3498db;
    font-weight: bold;
  }
</style>
</head>
<body>
<nav>
  <ul>
    <li><a href="/" class="active">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/portfolio">Portfolio</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main style="padding: 2rem;">
  <h1>Home Page</h1>
  <p>Notice the "Home" link is highlighted in the navigation!</p>
</main>
</body>
</html>

Add the active class to whichever page the user is currently viewing.

Common Mistakes to Avoid

Forgetting the `<nav>` Element

Problematic example:

<div class="navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</div>

Improved example:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Using <nav> improves accessibility and SEO!

Not Making It Responsive

Problematic example:

nav ul {
  display: flex;
}
/* No mobile styles! */

Improved example:

nav ul {
  display: flex;
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
}

Always test your navbar on mobile devices!

Poor Touch Targets on Mobile

Problematic example:

nav a {
  padding: 5px;
  font-size: 12px;
}

Improved example:

nav a {
  padding: 1rem 1.5rem;
  font-size: 16px;
}

Links should be at least 44x44 pixels for easy tapping on mobile.

Accessibility Best Practices

Use Semantic HTML

Always use the <nav> element for navigation:

<nav aria-label="Main navigation">
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>
</nav>

Indicate Current Page

Use aria-current for screen readers:

<nav>
<ul>
  <li><a href="/" aria-current="page">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>
</nav>

Ensure all links are keyboard accessible (they are by default, but don’t override this with CSS):

/* Good - visible focus state */
nav a:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Bad - removes focus indicator */
nav a:focus {
  outline: none; /* Don't do this! */
}

Try It Yourself

Ready to practice? Try these challenges:

Create a navigation bar with:

Logo on the left
4 navigation links on the right
Dark background with light text
Hover effects on links
Basic styling with padding and colors

Build a navigation bar that:

Sticks to the top when scrolling
Highlights the current page
Has a subtle shadow
Changes background opacity when scrolling
Includes smooth transitions

Create a professional navbar with:

Logo and navigation links
Dropdown menus for 2 sections
Hamburger menu for mobile (breakpoint at 768px)
Smooth animations for mobile menu
Active page highlighting
Sticky positioning
Full keyboard accessibility

What You Learned

Congratulations! You now know:

How to create a basic navigation bar with HTML and CSS
How to make navigation bars responsive for mobile
How to add dropdown menus
How to create sticky navigation
Navigation accessibility best practices

Next Steps

Now that you can create navigation bars, explore these related tutorials:

Links and Navigation — Learn more about HTML links
Semantic HTML — Use proper HTML5 elements
Responsive Images — Add responsive logos
Complete Website — Build a full site with navigation

Want to experiment with navigation? Try our interactive HTML editor!

Back to all tutorials

Why Navigation Bars Matter

Basic Navigation Bar Structure

Horizontal Navigation Bar with CSS

Navigation Bar with Logo

Sticky Navigation Bar

Responsive Mobile Menu

Active Page Highlighting

Common Mistakes to Avoid

Forgetting the `<nav>` Element

Not Making It Responsive

Poor Touch Targets on Mobile

Accessibility Best Practices

Use Semantic HTML

Indicate Current Page

Keyboard Navigation

Try It Yourself

Challenge 1: Basic Navbar (Basic)

Challenge 2: Sticky Navbar with Active State (Intermediate)

Challenge 3: Fully Responsive Navbar (Advanced)

What You Learned

Next Steps

Creating a Navigation Bar

Why Navigation Bars Matter

Basic Navigation Bar Structure

Horizontal Navigation Bar with CSS

Navigation Bar with Logo

Sticky Navigation Bar

Responsive Mobile Menu

Navigation with Dropdown Menu

Active Page Highlighting

Common Mistakes to Avoid

Forgetting the <nav> Element

Not Making It Responsive

Poor Touch Targets on Mobile

Accessibility Best Practices

Use Semantic HTML

Indicate Current Page

Keyboard Navigation

Try It Yourself

Challenge 1: Basic Navbar (Basic)

Challenge 2: Sticky Navbar with Active State (Intermediate)

Challenge 3: Fully Responsive Navbar (Advanced)

What You Learned

Next Steps

Forgetting the `<nav>` Element