Navigation Bars

Navigation Bars

A navbar is just a styled list of links! Build it for both vertical and horizontal menus.

The base structure

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

Vertical navbar

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}
nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: #000;
}
nav a:hover {
  background-color: #555;
  color: white;
}
nav a.active {
  background-color: #04aa6d;
  color: white;
}

Horizontal navbar

Make the list display inline, or even better, use flexbox:

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}
nav a {
  display: block;
  color: white;
  padding: 14px 16px;
}
nav a:hover {
  background-color: #111;
}

Sticky navbar

Make it stay on top when scrolling:

nav {
  position: sticky;
  top: 0;
}

TL;DR

• A navbar is a list of links: strip the bullets with list-style-type: none.
• Use display: flex (or inline-block) for horizontal menus.
• display: block + padding makes link areas bigger and easier to click.
• Highlight the current page with an .active class.
• a:hover gives feedback.