Bootstrap 3 sidebar navigation

Standard

The default navigation in bootstrap works great for many purposes. But suppose you require a sidebar navigation that has additional options for the page you are accessing. Using the styles of navbar-default you can extend the navigation bar functionality. In this example, I will use another navigation which I call secondary-nav to create a vertical menu on which will be displayed on the left hand side of the screen.

Full width sidebar:

Uncompressed sidebar

Uncompressed sidebar

When compressed:

Compressed sidebar using media queries

Compressed sidebar using media queries

The html is straightforward. The main addition to the default bootstrap css example is I have wrapped the entire navbar in my new class secondary-nav.

<div class="container">
   <div class="row">
      <div class="col-md-4">
         <div class="sidebar-nav">
            <div class="navbar navbar-default">
               <div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <i class="fa fa-bars"></i> </button> <span class="visible-sm visible-xs navbar-brand">Payment Options</span></div>
               <div class="navbar-collapse collapse sidebar-navbar-collapse">
                  <ul class="nav navbar-nav">
                     <ul class="nav navbar-nav">
                        <ul class="nav navbar-nav">
                           <li class="active"><a href="#">AuthorizeNet</a></li>
                        </ul>
                     </ul>
                  </ul>
                  <ul>
                     <ul>
                        <li><a href="#">Paypal</a></li>
                     </ul>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lacinia neque. Cras sed risus non nisl facilisis fermentum. Vestibulum non ante libero. Vestibulum ut ante turpis. Vivamus consectetur nibh sed sem aliquam interdum. Sed elementum tempus lorem, malesuada laoreet turpis tincidunt a. Etiam aliquet faucibus lectus, sed pharetra mi elementum sit amet. Aliquam auctor aliquam egestas.</div>
   </div>
</div>

What makes the navigation compact is media views. Media views allow you to target elements based on screen size, device-orientation or display-density. In the case of our secondary navigation we would like it to go into a compact menu once the screen width is below 768px.

@media (min-width: 768px) {
    .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
    }
    .sidebar-nav .navbar ul {
        float: none;
    }
    .sidebar-nav .navbar li {
        float: none;
        display: block;
    }
}
@media (max-width: 991px) {
    .sidebar-nav .navbar-header {
        float: none;
    }
    .sidebar-nav .navbar-toggle {
        display: block;
    }
    .sidebar-nav .navbar-collapse.collapse {
        display: none!important;
    }
    .sidebar-nav .navbar-nav {
        float: none!important;
    }
    .sidebar-nav .navbar-nav>li {
        float: none;
    }
    .sidebar-nav .navbar-collapse.collapse.in {
        display: block!important;
    }
    .sidebar-nav .collapsing {
        overflow: hidden!important;
    }
}

See a working example on JSFiddle.