Bootstrap Collapsible Sidebar With Icons

This code provides a collapsible sidebar with icons using Bootstrap. The sidebar contains various items and menus with nested levels, each represented by an icon and text. The major functionality of the code involves toggling the sidebar’s visibility when clicking on the “Collapse Sidebar” button.

Additionally, it allows marking sidebar items as active upon clicking, making it easy to navigate through different sections. This Bootstrap-based implementation offers a user-friendly and visually appealing way to manage content and improve the overall layout of your web page or application.

How to Create Bootstrap Collapsible Sidebar With Icons

1. First of all, load the Bootstrap CSS and Font Awesome CSS (for icons) by adding the following CDN links into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

2. Create the HTML structure for the sidebar as follows:

<div class="wrapper">
  <div class="sidebar">
    <div class="sb-item-list">
      <div class="sb-item"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Sidebar Item1</span></div>
      <div class="sb-item"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Sidebar Item2</span></div>
      <div class="sb-item sb-menu"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Sidebar Menu</span>
        <div class="sb-submenu">
          <div class="sb-item"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Level 2</span></div>
          <div class="sb-item sb-menu"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Level 2</span>
            <div class="sb-submenu">
              <div class="sb-item"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Level 3</span></div>
              <div class="sb-item"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Level 3</span></div>
              <div class="sb-item"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Level 3</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="sb-item"><i class="sb-icon fa fa-address-card"></i><span class="sb-text">Sidebar Item3</span></div>
      <div class="btn-toggle-sidebar sb-item"><i class="sb-icon fa fa-angle-double-left"></i><span class="sb-text">Collapse Sidebar</span><i class="sb-icon fa fa-angle-double-right"></i></div>
    </div>
  </div>
  <div class="main"></div>
</div>

3. To customize the sidebar, use the following CSS styles. Feel free to add your own CSS rules to match it with your web/app templates.

.wrapper {
  width: 100%;
  padding-left: 200px;
  transition-duration: 0.5s;
}
.wrapper .sidebar {
  width: 200px;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #333;
  white-space: nowrap;
  transition-duration: 0.5s;
  z-index: 1000;
}
.wrapper .sidebar .sb-item-list {
  width: 100%;
  height: calc(100% - 50px);
}
.wrapper .sidebar .sb-item-list > .sb-item > .sb-text {
  position: absolute;
  transition-duration: 0.5s;
}
.wrapper .sidebar .sb-item {
  display: block;
  width: 100%;
  line-height: 50px;
  color: #ccc;
  background: #333;
  cursor: pointer;
  padding-left: 7px;
}
.wrapper .sidebar .sb-item.active {
  border-left: solid 3px green;
  box-sizing: border-box;
}
.wrapper .sidebar .sb-item.active > .sb-icon {
  margin-left: -3px;
}
.wrapper .sidebar .sb-icon {
  padding-left: 10px;
  padding-right: 20px;
}
.wrapper .sidebar .sb-item:hover,
.wrapper .sidebar .sb-item.active {
  filter: brightness(130%);
}

.wrapper .sb-menu {
  position: relative;
}
.wrapper .sb-menu:after {
  content: " ";
  width: 0;
  height: 0;
  display: block;
  float: right;
  margin-top: 19px;
  margin-left: -12px;
  margin-right: 5px;
  border: solid 5px transparent;
  border-left-color: #eee;
}
.wrapper .sb-menu > .sb-submenu {
  display: none;
}
.wrapper .sb-menu:hover > .sb-submenu {
  position: absolute;
  display: block;
  width: 200px;
  top: 0;
  left: calc(100% + 1px);
}

.wrapper .sb-submenu > .sb-item:first-child {
  border-radius: 8px 8px 0px 0px;
}

.wrapper .sb-submenu > .sb-item:last-child {
  border-radius: 0px 0px 8px 8px;
}

.wrapper .btn-toggle-sidebar {
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #aaa;
  user-select: none;
}
.wrapper .btn-toggle-sidebar .sb-icon {
  padding-left: 15px;
}
.wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
  display: inline-block;
}
.wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
  display: none;
}

.wrapper.sidebar-collapse {
  padding-left: 60px;
}
.wrapper.sidebar-collapse .sidebar {
  width: 60px;
}
.wrapper.sidebar-collapse .sb-item-list > .sb-item > .sb-text {
  position: absolute;
  transform: translateX(-200%);
  opacity: 0;
}

.wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
  display: none;
}
.wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
  display: inline-block;
}

4. Now, load the jQuery and Bootstrap JS by adding the following scripts just before closing the <body> tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

5. Finally, add the following JavaScript function just after the jQuery to activate the sidebar toggle functionality.

$(function(){
    // toggle sidebar collapse
    $('.btn-toggle-sidebar').on('click', function(){
        $('.wrapper').toggleClass('sidebar-collapse');
    });
    // mark sidebar item as active when clicked
    $('.sb-item').on('click', function(){
        if ($(this).hasClass('btn-toggle-sidebar')) {
          return; // already actived
        }
        $(this).siblings().removeClass('active');
        $(this).siblings().find('.sb-item').removeClass('active');
        $(this).addClass('active');
    })
});

That’s it! hopefully, you have successfully created Bootstrap collapsible sidebar with icons. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.