Creating a Sidebar Menu

A sidebar menu is a vertical navigation bar usually placed on the left or right side of a web page. You can create one using a nav or aside element combined with various CSS layout methods.

Sidebars can be quite useful for websites that have many navigation links or require a clear, consistent list of destinations regardless of where the user is on the page. There are three common ways to build them: using fixed positioning, flexbox, or CSS grid.

Option 1: Fixed Positioning

The' "classic" way to create a sidebar is by using the position property with the fixed value. This method "floats" the sidebar on top of the viewport so it stays in place while you scroll the rest of the page:

When using this method, remember to add a margin-left to your main content container that matches the width of your sidebar. Otherwise, the sidebar will sit on top of your content.

Here's a working example:

<!DOCTYPE html>
<html>
<head>
<title>Sidebar Navigation Menu Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
  }
  /* The sidebar menu */
  .sidebar {
    height: 100%;
    width: 200px;
    position: fixed; /* Stay in place */
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
  }
  /* The sidebar links */
  .sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: #818181;
    display: block;
  }
  /* When you mouse over the navigation links, change their color */
  .sidebar a:hover {
    color: #f1f1f1;
    background-color: #333;
  }
  /* Style page content - use this for the main content area */
  .main {
    margin-left: 200px; /* Same as the width of the sidebar */
    padding: 20px;
  }
</style>
</head>
<body>

<nav class="sidebar">
  <a href="#">Home</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</nav>

<div class="main">
  <h2>Main Content</h2>
  <p>This is the main content area. The sidebar on the left is fixed to the viewport, so it stays in place while you scroll the main content.</p>
  <p>We used <code>margin-left: 200px;</code> on this content area to ensure that it isn't hidden behind the 200px wide sidebar.</p>
</div>

</body>
</html>

View Output Full Screen Preview

Option 2: Using Flexbox

A modern way to create a sidebar is with flexbox. By wrapping the sidebar and the main content in a container with display: flex, you can easily ensure they stay side-by-side without needing absolute or fixed positioning:

This method is excellent for simple layouts where the sidebar and the content should both move up and down together as the user scrolls:

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Sidebar Menu Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
  }
  .container {
    display: flex;
    min-height: 100vh;
  }
  .sidebar {
    width: 200px;
    background-color: #2c3e50;
    color: white;
    padding-top: 20px;
  }
  .sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: #bdc3c7;
    display: block;
  }
  .sidebar a:hover {
    color: #fff;
    background-color: #34495e;
  }
  .main {
    flex-grow: 1;
    padding: 20px;
    background-color: #f4f4f4;
  }
</style>
</head>
<body>

<div class="container">
  <nav class="sidebar">
    <a href="#">Home</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </nav>

<div class="main">
    <h2>Main Content</h2>
    <p>This layout uses Flexbox to place the sidebar and main content side-by-side. The <code>flex-grow: 1</code> property ensures the main content area fills the remaining space.</p>
  </div>
</div>

</body>
</html>

View Output Full Screen Preview

Option 3: Using CSS Grid

CSS grid provides the most robust way to define a clear 2-column structure. By using grid-template-columns, you can define exactly how much space the sidebar takes up and let the main content handle the rest:

Grid is generally considered the best layout method for complex layouts because it gives you total control over the columns and rows of your site.

Here's a full page example using CSS grid:

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Sidebar Menu Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
  }
  .grid-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 100vh;
  }
  .sidebar {
    background-color: #34495e;
    color: white;
    padding-top: 20px;
  }
  .sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: #ecf0f1;
    display: block;
  }
  .sidebar a:hover {
    color: #fff;
    background-color: #2c3e50;
  }
  .main {
    padding: 20px;
    background-color: #ecf0f1;
  }
</style>
</head>
<body>

<div class="grid-container">
  <nav class="sidebar">
    <a href="#">Home</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </nav>

<div class="main">
    <h2>Main Content Area</h2>
    <p>This layout uses CSS Grid to define a clear 2-column structure for the sidebar and the main content. The <code>grid-template-columns: 200px 1fr;</code> property handles the width of both areas.</p>
  </div>
</div>

</body>
</html>

View Output Full Screen Preview