Basic Sidebar Navigation For Bootstrap 4 - Sider Menu

Sider Menu is a minimal jQuery plugin to generate basic, collapsible, multi-level sidebar navigation for Bootstrap 4 projects.

How to use it:

1. You first need to load the required jQuery and Bootstrap 4 framework in the document.

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

2. Download and load the Sider Menu's files in the document.

<link rel="stylesheet" href="css/bootstrap-sidermenu.css" />
<script src="js/bootstrap-sidermenu.js"></script>

3. Create the sidebar navigation from a nested HTML list as follows:

<ul class="menu-siderbar nav flex-column">
  <li class="nav-item open">
    <a href="javascript:;" class="nav-link nav-link-parent">
      <i class="menu-icon fa fa-th"></i> jQueryScript
    </a>
    <ul class="menu-siderbar-child nav flex-column">
      <li class="nav-item">
        <a href="javascript:;" class="nav-link active">
          <i class="menu-icon fa fa-bolt"></i> jQuery
        </a>
      </li>
      <li class="nav-item">
        <a href="javascript:;" class="nav-link">
          <i class="menu-icon fa fa-bolt"></i> HTML5
        </a>
      </li>
      <li class="nav-item">
        <a href="javascript:;" class="nav-link">
          <i class="menu-icon fa fa-bolt"></i> CSS/CSS3
        </a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a href="javascript:;" class="nav-link nav-link-parent">
      <i class="menu-icon fa fa-th"></i> JavaScript
    </a>
    <ul class="menu-siderbar-child nav flex-column">
      <li class="nav-item">
        <a href="javascript:;" class="nav-link">
          <i class="menu-icon fa fa-bolt"></i> Angular
        </a>
      </li>
      <li class="nav-item">
        <a href="javascript:;" class="nav-link">
          <i class="menu-icon fa fa-bolt"></i> React
        </a>
      </li>
      <li class="nav-item">
        <a href="javascript:;" class="nav-link">
          <i class="menu-icon fa fa-bolt"></i> VueJS
        </a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a href="javascript:;" class="nav-link"><i class="menu-icon fa fa-envelope"></i> Contact</a>
  </li>
</ul>

---

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