Bootstrap Collapsible Sidebar With Icons

Bootstrap Collapsible Sidebar With Icons
Code Snippet:Bootstrap4 Sidebar
Author: hdsbook
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 8,804
License: MIT
Edit Code online: View on CodePen
Read More

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.

3 thoughts on “Bootstrap Collapsible Sidebar With Icons”

    • Hi Urvisha,

      You can used CSS media queries to make the menu responsive. Add the following CSS code to your website:

      /* Media query for smaller screens (e.g., when the screen width is less than 768px) */
      @media (max-width: 768px) {
        .wrapper {
          padding-left: 60px; /* Reduce the padding */
        }
      
        .wrapper .sidebar {
          width: 60px; /* Collapse the sidebar */
        }
      
        .wrapper .sb-item-list > .sb-item > .sb-text {
          position: absolute;
          transform: translateX(-200%);
          opacity: 0;
        }
      
        .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
          display: none;
        }
      
        .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
          display: inline-block;
        }
      }
      
      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X