Add references to jQuery library and the jQuery sidebarX plugins files into the html page.

<link rel="stylesheet" href="assets/vendors/sidebarX.min.css"/>
<script type="text/javascript" src="assets/vendors/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/vendors/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/vendors/js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="assets/sidebarX.min.js"></script>

You might need to load the Bootstrap Framework and Font Awesome icons.

<link rel="stylesheet" href="assets/vendors/css/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/vendors/css/font-awesome.min.css"/>

<!-- Page Sidebar -->
<div class='page-sidebar'>
  <a class='logo-box' href='index.html'>
  <span>Sidebar X</span>
  <i class='fa fa-lg fa-dot-circle-o' id='fixed-sidebar-toggle-button'></i>
  <i class='fa fa-lg fa-close' id='sidebar-toggle-button-close'></i>
  </a>
  <div class='page-sidebar-inner'>
    <div class='page-sidebar-menu'>
      <ul class='accordion-menu'>
        <!-- Active Page -->
        <li class='active-page'>
          <a href='#'><i class='fa fa-home'></i>
          <span>Dashboard</span></a>
        </li>
        <li>
          <a href='#'><i class='fa fa-envelope'></i>
          <span>Email</span></a>
        </li>
        <li>
          <a href='javascript:void(0)'><i class='fa fa-underline'></i>
          <span>UI Kits</span><i class='accordion-icon fa fa-angle-left'></i></a>
          <ul class='sub-menu'>
            <li><a href='#'>Alerts</a></li>
            <li><a href='#'>Buttons</a></li>
            <li><a href='#'>Icons</a></li>
            <li><a href='#'>Typography</a></li>
            <li><a href='#'>Notifications</a></li>
            <li><a href='#'>Modals</a></li>
            <li><a href='#'>Progress Bars</a></li>
            <li><a href='#'>Tabs & Accordions</a></li>
            <li><a href='#'>Tree View</a></li>
            <li><a href='#'>Nestable</a></li>
          </ul>
        </li>
        <li>
          <a href='javascript:void(0)'><i class='fa fa-th'></i>
          <span>Layouts</span><i class='accordion-icon fa fa-angle-left'></i></a>
          <ul class='sub-menu'>
            <li><a href='#'>Blank Page</a></li>
            <li><a href='#'>Boxed Layout</a></li>
            <li><a href='#'>Collapsed Sidebar</a></li>
            <li><a href='#'>Fixed Header</a></li>
            <li><a href='#'>Fixed Sidebar</a></li>
            <li><a href='#'>Fixed Sidebar & Header</a></li>
          </ul>
        </li>
        <li>
          <a href='javascript:void(0)'><i class='fa fa-wpforms'></i>
          <span>Forms</span><i class='accordion-icon fa fa-angle-left'></i></a>
          <ul class='sub-menu'>
            <li><a href='#'>Elements</a></li>
            <li><a href='#'>Form Wizard</a></li>
            <li><a href='#'>File Upload</a></li>
            <li><a href='#'>Image Crop</a></li>
            <li><a href='#'>Image Zoom</a></li>
            <li><a href='#'>X-editable</a></li>
          </ul>
        </li>
        <li>
          <a href='javascript:void(0)'><i class='fa fa-table'></i>
          <span>Tables</span><i class='accordion-icon fa fa-angle-left'></i></a>
          <ul class='sub-menu'>
            <li><a href='#'>Static</a></li>
            <li><a href='#'>Responsive</a></li>
            <li><a href='#'>Data Tables</a></li>
          </ul>
        </li>
        <li>
          <a href='#'><i class='fa fa-pie-chart'></i>
          <span>Charts</span></a>
        </li>
        <li>
          <a href='javascript:void(0)'><i class='fa fa-location-arrow'></i>
          <span>Maps</span><i class='accordion-icon fa fa-angle-left'></i></a>
          <ul class='sub-menu'>
            <li><a href='#'>Google</a></li>
            <li><a href='#'>Vector</a></li>
          </ul>
        </li>
        <li>
          <a href='javascript:void(0)'><i class='fa fa-gem'></i>
          <span>Extra</span><i class='accordion-icon fa fa-angle-left'></i></a>
          <ul class='sub-menu'>
            <li><a href='#'>Invoice</a></li>
            <li><a href='#'>404 Page</a></li>
            <li><a href='#'>500 Page</a></li>
            <li><a href='#'>Profile</a></li>
            <li><a href='#'>Login</a></li>
            <li><a href='#'>Register</a></li>
            <li><a href='#'>Lockscreen</a></li>
            <li><a href='#'>Todo</a></li>
            <li><a href='#'>Gallery</a></li>
            <li><a href='#'>Pricing Tables</a></li>
            <li><a href='#'>Timeline</a></li>
          </ul>
        </li>
        <li class='menu-divider'></li>
        <li>
          <a href='#'><i class='fa fa-cogs'></i>
          <span>Documentation</span></a>
        </li>
        <li>
          <a href='#'><i class='fa fa-support'></i>
          <span>Changelog</span><span class='label label-danger'>1.0</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- /Page Sidebar -->

$(document).sidebarX({
      submenu_animation_speed: 100,
      submenu_opacity_animation: true,
      page_boxed: false,
      page_header_fixed: false,
      page_sidebar_fixed: false,
      page_sidebar_collapsed: false
});