How to create navbar in css

CssHow-ToBeginner · 3 min read

How to Create a Navbar in CSS: Simple Steps and Example

To create a navbar in CSS, use a nav element with a list of links styled using Flexbox for horizontal layout. Apply CSS styles like display: flex; and background-color to arrange and style the navbar items.

📐

Syntax

A basic navbar uses the <nav> element containing an unordered list <ul> with list items <li> for each link. CSS uses display: flex; on the ul to arrange items horizontally. You can style background, padding, and link colors for a clean look.

css/html

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  list-style: none;
  background-color: #333;
  padding: 0;
  margin: 0;
}

nav ul li {
  margin: 0;
}

nav ul li a {
  display: block;
  padding: 1rem 1.5rem;
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #555;
}

Output

A horizontal dark navbar with four links: Home, About, Services, Contact. Links have white text and highlight with a lighter background on hover.

💻

Example

This example shows a simple horizontal navbar with four links. The navbar has a dark background, white text, and changes color when you hover over links.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Navbar</title>
<style>
  nav ul {
    display: flex;
    list-style: none;
    background-color: #333;
    padding: 0;
    margin: 0;
  }
  nav ul li {
    margin: 0;
  }
  nav ul li a {
    display: block;
    padding: 1rem 1.5rem;
    color: white;
    text-decoration: none;
    font-family: Arial, sans-serif;
  }
  nav ul li a:hover {
    background-color: #555;
  }
</style>
</head>
<body>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
</body>
</html>

Output

A horizontal navigation bar across the top with four clickable links labeled Home, About, Services, and Contact on a dark background. Links highlight lighter gray on hover.

⚠️

Common Pitfalls

Common mistakes include forgetting to remove default list styles, which causes bullets to appear, or not using display: flex; on the ul, which keeps links stacked vertically. Another issue is missing padding on links, making them hard to click. Also, not setting text-decoration: none; leaves underlines on links.

css

/* Wrong: No flex, default list styles visible */
nav ul {
  background-color: #333;
  padding: 0;
  margin: 0;
}

/* Right: Flex layout and no list styles */
nav ul {
  display: flex;
  list-style: none;
  background-color: #333;
  padding: 0;
  margin: 0;
}

Output

Without flex and list-style removal, the navbar shows vertical links with bullet points. With flex and list-style none, links appear horizontally without bullets.

📊

Quick Reference

Use nav for semantic navigation.
Wrap links in ul and li for structure.
Apply display: flex; on ul for horizontal layout.
Remove default list styles with list-style: none;.
Style links with padding and colors for usability and look.

✅

Key Takeaways

Use display: flex; on the ul to create a horizontal navbar layout.

Remove default list styles with list-style: none; to avoid bullets.

Add padding to links for easier clicking and better spacing.

Use semantic nav element to improve accessibility.

Style link colors and hover states for clear navigation feedback.