How to create: Responsive navigation bar with dropdown menu

Learn how to create a responsive navigation bar with a dropdown menu.

Create a responsive top navigation bar with a dropdown menu

Step 1 - Add HTML:

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

Second step - Add CSS:

/* Add black background color to top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* Set the style of links in the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
  background-color: #04AA6D;
  color: white;
}
/* Hide links to open and close top navigation on small screens */
.topnav .icon {
  display: none;
}
/* Dropdown menu container - used to position dropdown menu content */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Set the style of dropdown menu button to fit the top navigation bar */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
/* Set the style of dropdown menu content (default is hidden) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Set the style of links within the dropdown menu */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* In mouse hover, add dark background to top navigation bar links and dropdown menu buttons */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
/* In mouse hover, add grey background to dropdown menu links */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
/* Display the dropdown menu when the user hovers over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Hide all links except the first one ("Home") when the screen width is less than 600 pixels. The links should open and close the top navigation bar (icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* When the user clicks on the icon, JavaScript will add the "responsive" class to the top navigation bar. This class makes the top navigation bar look better on small screens (links are displayed vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

Step 3 - Add JavaScript:

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  }
    x.className = "topnav";
  }
}

Try it yourself

Related pages

Tutorial:CSS Dropdown Menu

Tutorial:How to create a clickable dropdown menu

Tutorial:CSS Navigation Bar

Tutorial:How to create a sidebar navigation bar