Vertical Accordion Sidebar

Create a responsive vertical sidebar menu with Bootstrap

Sidebar navigation is a standard for responsive design. While Bootstrap has the familar top navbar, the sidebar nav is glaringly missing from the stack of Bootstrap’s navigation components.

Here’s an example sidebar snippet that you can easily extend to your Bootstrap-based design.

Requirements. First, let’s define a few must-haves for the sidebar:

• Vertical orientation (kinda obvious isn’t it?)
• Multi-level — top menu, sub menu, sub-sub menu, etc..
• Toggle-able — can be optionally collapsed off-canvas
• Icons only when collapsed on small screens
• Auto collapse/expand as screen width changes
• Highlight active menu

Bootstrap’s List Group component is used for the basic structure. Font Awesome is used for the icons, but you can use the icon font of your choice. So that our text labels are hidden on small screens, we used Bootstrap’s utility classes. Notice the `hidden-sm-down` CSS class in the SPAN tags for the text labels. This will hide these SPANs on small screens.

<div class=”list-group”>
  <a href=”#menu1" class=”list-group-item”>
    <i class=”fa fa-dashboard”></i> 
    <span class=”hidden-sm-down”>Item 1</span> 
  </a>
  <a href=”#menu2" class=”list-group-item”>
    <i class=”fa fa-user”></i> 
    <span class=”hidden-sm-down”>Item 2</span> 
  </a>
  <a href=”#menu3" class=”list-group-item”>
    <i class=”fa fa-list”></i> 
    <span class=”hidden-sm-down”>Item 3</span> 
  </a>
  <a href=”#menu4" class=”list-group-item”>
    <i class=”fa fa-list-alt”></i> 
    <span class=”hidden-sm-down”>Item 4</span> 
  </a>
</div>

Next, the Bootstrap Collapse component is used for the toggle behaviors so that we can have accordion-like expand/collapse sections in the menu.

Notice now that “Item 2” has a sub-menu, and sub-sub menu…

This CSS is added to make the sidebar full height, and define it’s style:

#sidebar {
 height: 100vh;
 background-color: #333;
}
#sidebar .list-group-item {
 border-radius: 0;
 background-color: #333;
 color: #ccc;
 border-left: 0;
 border-right: 0;
 border-color: #2c2c2c;
 white-space: nowrap;
 text-decoration: none;
}

A little extra CSS (optional) is needed to indent the sidebar sub levels.

/* level 1*/
#sidebar .list-group .collapse .list-group-item {
 padding-left: 20px;
}
/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
 padding-left: 30px;
}
/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
 padding-left: 40px;
}

The entire sidebar gets wrapped in Bootstrap’s grid columns. The sidebar will consume 25% (col-md-3) of the container on large screens, and responsively scale down to 8% (col-xs-1) on smaller screens.

<div class=”container-fluid”>
  <div class=”row”>
    <div class=”col-md-3 col-xs-1" id=”sidebar”>
      (sidebar is here)
    </div>
    <main class=”col-md-9 col-xs-11">
      (main content here)
    </main>
  </div>
</div>

Using these grid classes allows our sidebar to auto-magically shrink/expand when the screen width changes.

A hamburger menu icon link is added the the main content area so that the sidebar can be manually toggled. Notice that the href=”#sidebar” target matches the id=”sidebar” of the grid column (col-md-3) that wraps the entire sidebar.

<a href=”#sidebar” data-toggle=”collapse”><i class=”fa fa-navicon fa-lg”></i></a>

To highlight the current “active” menu, and toggle the open/closed submenu caret icons there’s some more optional CSS. Font Awesome is used for the submenu caret icons.

/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
 background-color: #222;
}
/* closed state icon */
#sidebar .list-group .list-group-item[aria-expanded=”false”]::after {
  content: “ \f0d7”;
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}
/* open state */
#sidebar .list-group .list-group-item[aria-expanded=”true”] {
  background-color: #222;
}
/* open state icon */
#sidebar .list-group .list-group-item[aria-expanded=”true”]::after {
  content: “ \f0da”;
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}

Bringing it all together, here’s the final code..

This example can be greatly simplified without the highlighted state, icons, and submenu toggle states. As you can see Bootstrap’s grid, collapse and list-group components alone enable us to build a repsonsive sidebar.

Enjoy!