<div class="elements-sidebar">
  <div class="header">
    <h3>Elements</h3>
  </div>
  <div class="elements-list has-slimscroll">
    <!--Menu item-->
    <div class="element-menu">
      <a class="menu-trigger">
        <span>Buttons</span>
        <i data-feather="chevron-right"></i>
      </a>
      <!--Submenu-->
      <div class="submenu-wrap">
        <ul>
          <li>
            <a href="#simple-buttons">Simple Buttons</a>
          </li>
          <li>
            <a href="#solid-buttons">Solid Buttons</a>
          </li>
          <li>
            <a href="#raised-buttons">Raised Buttons</a>
          </li>
          <li>
            <a href="#phantom-buttons">Phantom Buttons</a>
          </li>
          <li>
            <a href="#reversed-phantom-buttons">Reversed Phantom</a>
          </li>
          <li>
            <a href="#button-colors">Buttons Colors</a>
          </li>
        </ul>
      </div>
    </div>
    <!--Menu item-->
    <div class="element-menu">
      <a class="menu-trigger">
        <span>Form Controls</span>
        <i data-feather="chevron-right"></i>
      </a>
      <!--Submenu-->
      <div class="submenu-wrap">
        <ul>
          <li>
            <a href="#f-switch">Switches</a>
          </li>
          <li>
            <a href="#animated-switch">Animated Switch</a>
          </li>
          <li>
            <a href="#radio-buttons">Radio Buttons</a>
          </li>
          <li>
            <a href="#round-checkboxes">Round Checkboxes</a>
          </li>
          <li>
            <a href="#basic-checkboxes">Basic Checkboxes</a>
          </li>
          <li>
            <a href="#default-inputs">Default Inputs</a>
          </li>
          <li>
            <a href="#icon-inputs">Icon Inputs</a>
          </li>
          <li>
            <a href="#validation-inputs">Validation Inputs</a>
          </li>
        </ul>
      </div>
    </div>
    <!--Menu item-->
    <div class="element-menu">
      <a class="menu-trigger">
        <span>Dropdowns</span>
        <i data-feather="chevron-right"></i>
      </a>
      <!--Submenu-->
      <div class="submenu-wrap">
        <ul>
          <li>
            <a href="#basic-dropdown">Dropdown</a>
          </li>
        </ul>
      </div>
    </div>
    <!--Menu item-->
    <div class="element-menu">
      <a class="menu-trigger">
        <span>Modals</span>
        <i data-feather="chevron-right"></i>
      </a>
      <!--Submenu-->
      <div class="submenu-wrap">
        <ul>
          <li>
            <a href="#share-modal-demo">Share Modal</a>
          </li>
          <li>
            <a href="#user-photos-modal-demo">User Photos Modal</a>
          </li>
          <li>
            <a href="#uploader-modal-demo">Photo Uploader Modal</a>
          </li>
          <li>
            <a href="#live-modal-demo">Webcam Modal</a>
          </li>
          <li>
            <a href="#onboarding-modal-demo">Onboarding Modals</a>
          </li>
          <li>
            <a href="#custom-lightbox-demo">Custom Lightbox UI</a>
          </li>
        </ul>
      </div>
    </div>
    <!--Menu item-->
    <div class="element-menu">
      <a class="menu-trigger">
        <span>Fancybox 3</span>
        <i data-feather="chevron-right"></i>
      </a>
      <!--Submenu-->
      <div class="submenu-wrap">
        <ul>
          <li>
            <a href="#fancy-1">Customized Layout</a>
          </li>
          <li>
            <a href="#fancy-2">Confirm Dialog</a>
          </li>
          <li>
            <a href="#fancy-3">Morphing Modal</a>
          </li>
          <li class="is-hidden">
            <a href="#fancy-4">Product Quickview</a>
          </li>
        </ul>
      </div>
    </div>
    <!--Menu item-->
    <div class="element-menu">
      <a class="menu-trigger">
        <span>Icons</span>
        <i data-feather="chevron-right"></i>
      </a>
      <!--Submenu-->
      <div class="submenu-wrap">
        <ul>
          <li>
            <a href="#vivid-icons">Vivid Icons</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
