CSS Vertical Navbar

A vertical navbar runs down the side of the page instead of across the top, the layout you see in most dashboards and admin panels where the sidebar stays put while the main content scrolls beside it.

In this page:

Stacking List Items Vertically
Fixed vs Static Sidebar Positioning
Active Link Highlighting
Icons Alongside Labels
Collapsible Sidebar Pattern

Stacking List Items Vertically

A vertical navbar starts from the same semantic ul/li structure as a horizontal one, but instead of overriding the default block display of li elements, you simply leave it alone. Block-level list items stack top to bottom automatically, which is exactly the vertical layout you want.

Example: Stacking List Items Vertically

css

<style>
nav ul {
  list-style: none;
}
</style>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Fixed vs Static Sidebar Positioning

A static sidebar scrolls away with the rest of the page, while position: fixed pins it to the viewport so it stays visible as the user scrolls the main content. Fixed sidebars need their width accounted for in the main content's margin, or content will render underneath them.

Example: Fixed vs Static Sidebar Positioning

css

<style>
.sidebar {
  position: fixed;
  width: 200px;
  background: steelblue;
  color: white;
  padding: 10px;
}
.content {
  margin-left: 220px;
  background: #eee;
  padding: 10px;
}
</style>
<nav class="sidebar">Sidebar</nav>
<main class="content">Content is not covered by the fixed sidebar</main>

Active Link Highlighting

Marking the current page in a vertical nav usually means adding an "active" class server-side or via JavaScript, then styling that class with a background color, left border accent, or bold text so the user always knows where they are in the app.

Example: Active Link Highlighting

css

<style>
a.active {
  background: #333;
  color: white;
  border-left: 4px solid blue;
}
</style>
<a href="#" class="active">Dashboard</a>
<a href="#">Settings</a>

Icons Alongside Labels

Sidebar navigation commonly pairs a small icon with each text label. Using display: flex with align-items: center on each link keeps the icon and text vertically centered together regardless of icon size, and gap adds consistent spacing between them.

Example: Icons Alongside Labels

css

<style>
a {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
<a href="#"><span>🏠</span> Home</a>

Collapsible Sidebar Pattern

A common enhancement is a sidebar that can shrink to a narrow icon-only strip and expand back to full width. This is done by toggling a class that changes the sidebar's width, transitioning the width property for a smooth animated collapse rather than an instant jump.

Example: Collapsible Sidebar Pattern

css

<style>
.sidebar {
  width: 200px;
  background: steelblue;
  color: white;
  padding: 10px;
  transition: width 0.3s;
}
.sidebar.collapsed {
  width: 60px;
}
</style>
<nav class="sidebar collapsed">Collapsed narrow, animates back to 200px</nav>

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Navigation Bar Next Lesson → CSS Horizontal Navbar