Bootstrap 4 Sidenav

Bootstrap 4 Sidenav navigation component

Bootstrap sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.


Basic Bootstrap 4 version

        
            
<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" data-mdb-ripple-init class="btn btn-primary p-3 button-collapse"><i
  class="fas fa-bars"></i></a>

<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav2 side">
<ul class="custom-scrollbar">
  <!-- Logo -->
  <li>
    <div class="logo-wrapper waves-light">
      <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.webp"
          class="img-fluid flex-center"></a>
    </div>
  </li>
  <!--/. Logo -->
  <!--Social-->
  <li>
    <ul class="social">
      <li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
      <li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
      <li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
      <li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
    </ul>
  </li>
  <!--/Social-->
  <!--Search Form-->
  <li>
    <form class="search-form" role="search">
      <div class="form-group md-form mt-0 pt-1 waves-light">
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </form>
  </li>
  <!--/.Search Form-->
  <!-- Side navigation links -->
  <li>
    <ul class="collapsible collapsible-accordion">
      <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Submit
          blog<i class="fas fa-angle-down rotate-icon"></i></a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#" class="waves-effect">Submit listing</a>
            </li>
            <li><a href="#" class="waves-effect">Registration form</a>
            </li>
          </ul>
        </div>
      </li>
      <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i>
          Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#" class="waves-effect">For bloggers</a>
            </li>
            <li><a href="#" class="waves-effect">For authors</a>
            </li>
          </ul>
        </div>
      </li>
      <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i
            class="fas fa-angle-down rotate-icon"></i></a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#" class="waves-effect">Introduction</a>
            </li>
            <li><a href="#" class="waves-effect">Monthly meetings</a>
            </li>
          </ul>
        </div>
      </li>
      <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i
            class="fas fa-angle-down rotate-icon"></i></a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#" class="waves-effect">FAQ</a>
            </li>
            <li><a href="#" class="waves-effect">Write a message</a>
            </li>
            <li><a href="#" class="waves-effect">FAQ</a>
            </li>
            <li><a href="#" class="waves-effect">Write a message</a>
            </li>
            <li><a href="#" class="waves-effect">FAQ</a>
            </li>
            <li><a href="#" class="waves-effect">Write a message</a>
            </li>
            <li><a href="#" class="waves-effect">FAQ</a>
            </li>
            <li><a href="#" class="waves-effect">Write a message</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
  <!--/. Side navigation links -->
</ul>
<div class="sidenav-bg rgba-blue-strong"></div>
</div>
<!--/. Sidebar navigation -->
      
        
    
        
            
      $(document).ready(function() {
        // SideNav Button Initialization
      
        $(".button-collapse").sideNav2();
        // SideNav Scrollbar Initialization
      
        var sideNavScrollbar = document.querySelector('.custom-scrollbar');
        var ps = new PerfectScrollbar(sideNavScrollbar);
      });
      
        
    

Above is an example template for a Sidenav in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

        
            
          <!-- Sidenav -->
          <nav
            id="sidenav-1"
            data-mdb-sidenav-init class="sidenav"
            data-mdb-hidden="false"
          >
            <ul class="sidenav-menu">
              <li class="sidenav-item">
                <a class="sidenav-link">
                  <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
                >
              </li>
              <li class="sidenav-item">
                <a class="sidenav-link"
                  ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
                >
                <ul class="sidenav-collapse show">
                  <li class="sidenav-item">
                    <a class="sidenav-link">Link 2</a>
                  </li>
                  <li class="sidenav-item">
                    <a class="sidenav-link">Link 3</a>
                  </li>
                </ul>
              </li>
              <li class="sidenav-item">
                <a class="sidenav-link"
                  ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
                >
                <ul class="sidenav-collapse">
                  <li class="sidenav-item">
                    <a class="sidenav-link">Link 4</a>
                  </li>
                  <li class="sidenav-item">
                    <a class="sidenav-link"
                      >Link 5</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
          <!-- Sidenav -->

          <!-- Toggler -->
          <button data-mdb-button-init
            data-mdb-toggle="sidenav"
            data-mdb-target="#sidenav-1"
            data-mdb-ripple-init class="btn btn-primary"
            aria-controls="#sidenav-1"
            aria-haspopup="true"
          >
            <i class="fas fa-bars"></i>
          </button>
          <!-- Toggler -->