Skip to main content

Unfold (Sidebar)

Examples of toggle contextual overlays for displaying lists of links and more with the Space unfold plugin.

Signup form

HTML:

              
                <!-- Account Sidebar Toggle Button -->
                <a id="sidebarNavToggler" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
                   aria-controls="sidebarContent"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="click"
                   data-unfold-hide-on-scroll="false"
                   data-unfold-target="#sidebarContent"
                   data-unfold-type="css-animation"
                   data-unfold-animation-in="fadeInRight"
                   data-unfold-animation-out="fadeOutRight"
                   data-unfold-duration="500">
                  <span class="fa fa-bars btn-icon__inner font-size-13"></span>
                </a>
                <!-- End Account Sidebar Toggle Button -->

                <!-- Panel Sidebar Navigation -->
                <aside id="sidebarContent" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarNavToggler">
                  <div class="u-sidebar__scroller">
                    <div class="u-sidebar__container">
                      <div class="u-sidebar--panel__footer-offset">
                        <!-- Toggle Button -->
                        <div class="d-flex align-items-center border-bottom py-4 px-5">
                          <h4 class="h5 mb-0">Account</h4>

                          <button type="button" class="close u-sidebar__close ml-auto"
                                  aria-controls="sidebarContent"
                                  aria-haspopup="true"
                                  aria-expanded="false"
                                  data-unfold-event="click"
                                  data-unfold-hide-on-scroll="false"
                                  data-unfold-target="#sidebarContent"
                                  data-unfold-type="css-animation"
                                  data-unfold-animation-in="fadeInRight"
                                  data-unfold-animation-out="fadeOutRight"
                                  data-unfold-duration="500">
                            <span aria-hidden="true">×</span>
                          </button>
                        </div>
                        <!-- End Toggle Button -->

                        <!-- Content -->
                        <div class="js-scrollbar u-sidebar__body">
                          <div class="u-sidebar__content py-5">
                            <!-- Title -->
                            <div class="py-2 px-5">
                              <h4 class="text-uppercase text-muted font-size-13 mb-0">Menu label</h4>
                            </div>
                            <!-- End Title -->

                            <!-- List -->
                            <ul class="list-unstyled font-size-14 mb-5">
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/finance-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Dashboard</span>
                                  </div>
                                </a>
                              </li>
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/touch-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Activity</span>
                                  </div>
                                </a>
                              </li>
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/team-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Team</span>
                                  </div>
                                </a>
                              </li>
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/email-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Mailbox</span>
                                  </div>
                                </a>
                              </li>
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/projects-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Projects</span>
                                  </div>
                                </a>
                              </li>
                            </ul>
                            <!-- End List -->

                            <!-- Title -->
                            <div class="py-2 px-5">
                              <h4 class="text-uppercase text-muted font-size-13 mb-0">Sub level</h4>
                            </div>
                            <!-- End Title -->

                            <!-- List -->
                            <ul class="list-unstyled font-size-14 mb-0">
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/calendar-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Calendar</span>
                                  </div>
                                </a>
                              </li>
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/cog-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Tools</span>
                                  </div>
                                </a>
                              </li>
                              <li>
                                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                                  <img class="max-width-4 mr-3" src="../assets/svg/components/archive-dark-icon.svg" alt="Image Description">
                                  <div class="media-body">
                                    <span>Archive</span>
                                  </div>
                                </a>
                              </li>
                            </ul>
                            <!-- End List -->
                          </div>
                        </div>
                        <!-- End Content -->
                      </div>

                      <!-- Footer -->
                      <footer class="u-sidebar__footer u-sidebar__footer--panel py-4 px-5">
                        <!-- List -->
                        <ul class="list-inline font-size-14 mb-0">
                          <li class="list-inline-item">
                            <a class="u-sidebar--panel__link pr-2" href="../html/pages/privacy.html">Privacy</a>
                          </li>
                          <li class="list-inline-item">
                            <a class="u-sidebar--panel__link px-2" href="../html/pages/terms.html">Terms</a>
                          </li>
                          <li class="list-inline-item">
                            <a class="u-sidebar--panel__link pl-2" href="../html/pages/help.html">
                              <i class="fa fa-info-circle"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End List -->
                      </footer>
                      <!-- End Footer -->
                    </div>
                  </div>
                </aside>
                <!-- End Panel Sidebar Navigation -->
              
            

CSS library:

            
              <link rel="stylesheet" href="../../assets/vendor/animate.css">
              <link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.unfold.js"></script>
              <script src="../../assets/js/components/hs.malihu-scrollbar.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of unfold component
                  $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
                });
              </script>