Sidebar2

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

By virtue of its clarity and simplicity it remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.

Thanks to Contrast Design Bootstrap you can easily implement Sidebar in your own projects, by using one of various, alluring Side Menus.

Navigation on the left is a live demo of Sidebar.

Sidebar example

image info

html

        <div class="sidebar" role="cdb-sidebar" color="white">
          <div class="sidebar-container">
            <div class="sidebar-header text-center">
              <a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
              <a class="sidebar-brand">Contrast</a>
            </div>
            <div class="sidebar-nav">
              <div class="sidenav">
                <a class="sidebar-item">
                  <i class="fa fa-th-large sidebar-icon"></i>
                  <span>Dashboard</span>
                </a>
                <a class="sidebar-item">
                  <i class="fa fa-sticky-note sidebar-icon"></i>
                  <span>Components</span>
                </a>
              </div>
              <div class="sidenav">
                <div class="sidebar-dropdown">
                  <div
                    class="sidebar-item"
                    data-toggle="collapse"
                    data-target="#collapseOne"
                    aria-expanded="true"
                    aria-controls="collapseOne"
                  >
                    <i class="fa fa-th sidebar-icon"></i>
                    <span>Sidemenu</span>
                    <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                  </div>
                  <div class="sidebar-sub-menu collapse" id="collapseOne">
                    <a class="sub-menu-item">Submenu 1</a>
                    <a class="sub-menu-item">Submenu 2</a>
                    <a class="sub-menu-item">Submenu 3</a>
                  </div>
                </div>
                <div class="sidebar-dropdown">
                  <div
                    class="sidebar-item"
                    data-toggle="collapse"
                    data-target="#collapseTwo"
                    aria-expanded="true"
                    aria-controls="collapseTwo"
                  >
                    <i class="fa fa-book sidebar-icon"></i>
                    <span>Sidemenu 2</span>
                    <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                  </div>
                  <div class="sidebar-sub-menu collapse" id="collapseTwo">
                    <a class="sub-menu-item">Submenu 1</a>
                    <a class="sub-menu-item">Submenu 2</a>
                    <a class="sub-menu-item">Submenu 3</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="sidebar-footer">Sidebar Footer</div>
          </div>

Script

   <script src="../build/cdbbootstrap.js"></script>
    <script>
      const sidebar = document.querySelector('.sidebar');
      new CDB.Sidebar(sidebar);
    </script>

TimePicker

Table