Collapsible Sidenbar Navigation For Dashboard - SimpleSidebar

File Size: 8.04 KB
Views Total: 5080
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>


  <div class="page-body">

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

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


4. Initialize the sidebar navigation plugin and done.


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