CSS Vertical Navigation Bar

A vertical navigation bar stacks its links on top of each other, and it usually runs along the left or right side of a webpage.

Its structure is simple: an unordered list (<ul>) whose list items (<li>) each contain one link (<a>).

Example

A simple starting version: gray background color, with hover effects on the links.

Create a basic vertical navigation bar using an unordered list with four links: Home, News, Contact, About. Style it with width 200px, light gray background (#f1f1f1), no list bullets, no margin/padding. Links should be block-level, black text, 8px 16px padding, no underline. On hover, change background to #555555 and text to white.

> Output: complete HTML page

Prompt

Create a basic vertical navigation bar using an unordered list with four links: Home, News, Contact, About. Style it with width 200px, light gray background (#f1f1f1), no list bullets, no margin/padding. Links should be block-level, black text, 8px 16px padding, no underline. On hover, change background to #555555 and text to white.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Vertical Navbar</title>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

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

</body>
</html>

Active State

So users can tell which page they are on, highlight the matching link with an "active" class.

Example

Create a vertical navigation bar with an active state. Use the same basic vertical navbar styling (width 200px, gray background, block links). Add an "active" class on the Home link with background-color #04AA6D and white text. Include hover effect on non-active links.

> Output: complete HTML page

Prompt

Create a vertical navigation bar with an active state. Use the same basic vertical navbar styling (width 200px, gray background, block links). Add an "active" class on the Home link with background-color #04AA6D and white text. Include hover effect on non-active links.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active State Navbar</title>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navbar with Active State</h2>

<ul>
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

</body>
</html>

Center Navbar Links & Add Borders

Centering the links takes text-align: center on <li> or <a>. For a border around the whole navbar, put border on <ul>. Each <li> except the last one then gets a border-bottom.

Example

Create a vertical navigation bar with centered links and borders. Add a 1px solid #555555 border around the ul, and a bottom border on each li except the last one (using li:last-child). Center the text with text-align: center. Use the same basic vertical navbar styling.

> Output: complete HTML page

Prompt

Create a vertical navigation bar with centered links and borders. Add a 1px solid #555555 border around the ul, and a bottom border on each li except the last one (using li:last-child). Center the text with text-align: center. Use the same basic vertical navbar styling.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Navbar with Borders</title>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555555;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li {
  text-align: center;
  border-bottom: 1px solid #555555;
}

li:last-child {
  border-bottom: none;
}

li a:hover {
  background-color: #555555;
  color: white;
}
</style>
</head>
<body>

<h2>Centered Navbar Links with Borders</h2>

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

</body>
</html>

Full-height Vertical Navbar

This side navigation takes the full height and is "sticky": it does not move, even when the user scrolls.

Example

Create a full-height fixed vertical navigation bar. The ul should have width 130px, light gray background, height 100%, position fixed, and overflow auto. Include links: Home, News, Contact, About. Add some body content to demonstrate the fixed sidebar.

> Output: complete HTML page

Prompt

Create a full-height fixed vertical navigation bar. The ul should have width 130px, light gray background, height 100%, position fixed, and overflow auto. Include links: Home, News, Contact, About. Add some body content to demonstrate the fixed sidebar.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full-height Vertical Navbar</title>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 130px;
  background-color: #f1f1f1;
  height: 100%;
  position: fixed;
  overflow: auto;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555555;
  color: white;
}

.content {
  margin-left: 150px;
  padding: 1px 16px;
}
</style>
</head>
<body>

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

<div class="content">
  <h2>Full-height Fixed Side Navbar</h2>
  <p>This side navigation bar is full-height and fixed to the left side.</p>
  <p>Notice that this navbar will stay in place even when you scroll the page.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.</p>
</div>

</body>
</html>

Responsive Navbar

CSS media queries make the navbar responsive, turning it from vertical into horizontal once the screen is wider.

Example

Create a responsive vertical navigation bar that becomes horizontal on wider screens using CSS media queries. At narrow widths the links stack vertically; at wider widths (e.g., 600px+) they display horizontally using float or flexbox.

> Output: complete HTML page

Prompt

Create a responsive vertical navigation bar that becomes horizontal on wider screens using CSS media queries. At narrow widths the links stack vertically; at wider widths (e.g., 600px+) they display horizontally using float or flexbox.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

@media screen and (min-width: 600px) {
  li {
    float: left;
  }
}
</style>
</head>
<body>

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

<h2>Responsive Navbar</h2>
<p>Resize the browser window to see the navbar change from vertical to horizontal.</p>

</body>
</html>