How To Create a Navigation Bar
Learn how to build a top navigation bar that turns into a hamburger menu on phones.
Step 1: The HTML
A navigation bar is a <nav> with a logo, a button for phones, and a list of links.
Example
html
<nav class="navbar">
<a href="#" class="logo">Ali's Shop</a>
<button class="menu-btn" id="menuBtn">☰</button>
<ul class="links" id="links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>☰ is the code for the three-line "hamburger" symbol.
Step 2: The CSS
Flexbox puts the logo on the left and the links on the right. The menu button is hidden on big screens.
Example
css
.navbar { display: flex; align-items: center; justify-content: space-between; background: #065f46; padding: 0 16px; }
.links { display: flex; list-style: none; margin: 0; padding: 0; }
.links a { display: block; color: white; padding: 16px; text-decoration: none; }
.links a:hover, .links a.active { background: #059669; }
.menu-btn { display: none; }A media query changes the layout on screens narrower than 600px: the links stack and hide until the button is pressed.
Example
css
@media (max-width: 600px) {
.menu-btn { display: block; }
.navbar { flex-wrap: wrap; }
.links { display: none; flex-direction: column; width: 100%; }
.links.open { display: flex; }
}Step 3: The JavaScript
A click on the button adds or removes the open class. classList.toggle does both jobs in one line.
Example
javascript
document.getElementById("menuBtn").addEventListener("click", function () {
document.getElementById("links").classList.toggle("open");
});The Complete Example
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.navbar { display: flex; align-items: center; justify-content: space-between; background: #065f46; padding: 0 16px; }
.logo { color: white; font-weight: bold; font-size: 20px; text-decoration: none; padding: 14px 0; }
.links { display: flex; list-style: none; margin: 0; padding: 0; }
.links a { display: block; color: white; padding: 16px; text-decoration: none; }
.links a:hover, .links a.active { background: #059669; }
.menu-btn { display: none; background: none; border: none; color: white; font-size: 26px; cursor: pointer; }
@media (max-width: 600px) {
.menu-btn { display: block; }
.navbar { flex-wrap: wrap; }
.links { display: none; flex-direction: column; width: 100%; }
.links.open { display: flex; }
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="logo">Ali's Shop</a>
<button class="menu-btn" id="menuBtn" aria-label="Open menu">☰</button>
<ul class="links" id="links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p style="padding:16px;">Make the result window narrow to see the hamburger button.</p>
<script>
document.getElementById("menuBtn").addEventListener("click", function () {
document.getElementById("links").classList.toggle("open");
});
</script>
</body>
</html>How It Works
| Piece | Job |
|---|---|
justify-content: space-between | Pushes the logo left and the links right |
.active class | Highlights the page you are on |
@media (max-width: 600px) | Rules that apply only on small screens |
classList.toggle("open") | Shows or hides the links on each click |
Give icon-only buttons an aria-label, like "Open menu", so screen reader users know what the button does.
Exercise
Exercise
What does classList.toggle("open") do?