Collapsible Sidenbar Navigation For Dashboard - SimpleSidebar

The jQuery SimpleSidebar plugin converts a nested HTML list into a collapsible, multi-level sidebar navigation for dashboard, admin panel, documentation webpage, and much more.

You can also create a sidebar toggler in the document that allows the visitor to toggle the sidebar navigation just like an off-canvas push menu.

The sidebar will auto dismiss on the mobile device so that your mobile visitors need to tap the toggler to show/hide the navigation.

How to use it:

1. Load jQuery and the SimpleSidebar plugin in the html document.

<link rel="stylesheet" href="/path/to/simplesidebar.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/simplesidebar.js"></script>

2. Load the latest Font Awesome Iconic Fonts for the navigation icons.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

3. The main HTML structure for the sidebar navigation and main content.

<div id="my-sidebar-context" class="widget-sidebar-context">

  <header class="page-header">

    <!-- Menu Toggler -->
    <a href="#" class="navbar-toggler widget-sidebar-toggler">
      <i class="fas fa-bars"></i>
    </a>

  </header>

  <div class="page-body">

    <!-- Sidebar Navigation -->
    <nav class="widget-sidebar">
      <ul>
        <li class="active">
          <a href="#">
            <i class="fas fa-bars"></i><span> Dashboard </span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fas fa-pencil-alt"></i><span> Home </span>
          </a>
        </li>
        <li>
          <a href="#sidebar-link-mycomponents" data-toggle="collapse"
             aria-expanded="true"
             class="dropdown-toggle">
              <i class="fas fa-shapes"></i><span> Posts </span>
          </a>
          <ul class="collapse show"
              id="sidebar-link-mycomponents">
              <li>
                <a href="#">All Posts</a>
              </li>
          </ul>
        </li>
      </ul>
    </nav>

    <!-- Main Content -->
    <div class="page-main">
      Main Content Here
    </div>
  </div>
  
  <!-- Footer Content -->
  <footer class="page-footer">
    Footer
  </footer>

</div>

4. Initialize the sidebar navigation plugin and done.

$(function(){
  $("#my-sidebar-context").simpleSidebar();
});

---

This awesome jQuery plugin is developed by lingtalfi. For more Advanced Usages, please check the demo page or visit the official website.