Bootstrap Sidebar Menu Example: Earlier in one of our tutorials we've discussed about Creating Bootstrap Horizontal Navbar. In this tutorial we'll see how to create sidebar menu in bootstrap. The Bootstrap Sidebar Menu or otherwise called as Bootstrap Vertical Navigation Menu is a list of menu items or links, stacked vertically. It can be placed left or right hand side of the website. Apart from the appearance, it is very similar to horizontal menu and is used to provide easy way of navigation through the website.
Bootstrap Sidebar Menu Example
For this tutorial, we build a customized Dashboard Menu with Bootstrap. This Dashboard Menu (i.e, bootstrap vertical navigation bar) is going to contain a list of stacked up links along with suitable icons to each item in the list. To add menu icons we use Glyphicons. Glyphicons is the icon font that comes with Bootstrap3 and is present inside the 'font' folder of Bootstrap files.
Recommended Read: Add Search Form to Bootstrap Horizontal Navbar
First create an unordered list of menu items and add Bootstrap CSS Class nav, nav-pills & nav-stacked to <ul> element. To differentiate the active menu item from the rest of list use active class to the corresponding <li> element.
Use this HTML Markup to add Bootstrap Vertical Navigation Menu Bar to Website.
Recommended Read: How to Create Bootstrap Vertical Accordion Menu
HTML Markup for Bootstrap Vertical Navigation Menu Bar
<ul id="sidebar" class="nav nav-pills nav-stacked" style="max-width: 200px;">
<li class="active"><a href="#"><span class="glyphicon glyphicon-off"></span> Overview</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
<li><a href="#"><span class="glyphicon glyphicon-lock"></span> Access</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Message</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span> Schedule</a></li>
<li><a href="#"><span class="glyphicon glyphicon-signal"></span> Statistics</a></li>
<li><a href="#"><span class="glyphicon glyphicon-comment"></span> Chat</a></li>
<li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contacts</a></li>
</ul>
This gives us the Vertical Bootstrap Sidebar Menu with default theme.
Recommended Read: How to integrate Twitter Bootstrap 3 with PHP CodeIgniter Framework
Customize Bootstrap Vertical Navigation Menu Bar
Next we overwrite some of the Bootstrap 3 styles to change the default theme of the bootstrap vertical navigation bar. Add these CSS Styles to a new stylesheet and include the stylesheet next to the Bootstrap CSS file and it's done.
Custom CSS for Bootstrap Vertical Navigation Menu Bar
#sidebar {
background-color: #191919;
padding: 10px;
}
#sidebar a:hover, a:focus {
color: #FFF;
text-decoration: none;
}
#sidebar.nav > li > a,
#sidebar.nav > li > a:link {
background-color: #191919;
color: #FFF;
}
#sidebar.nav > li > a:hover,
#sidebar.nav > li > a:focus {
background-color: #373737;
}
#sidebar.nav-pills > li.active > a,
#sidebar.nav-pills > li.active > a:hover,
#sidebar.nav-pills > li.active > a:focus {
color: #FFF;
background-color: #C72A25;
}
This is our new customized bootstrap sidebar navigation menu.
Recommended Read: Build Multi-Frame Carousel Image Slider using Twitter Bootstrap 3
Recommended Read: Build Landing Pages in minutes using Bootstrap Jumbotron Plug-in
This was all about creating a custom vertical navigation menu bar in bootstrap. Hope you find this Bootstrap Sidebar Menu tutorial useful. Kindly share it on social media.
