Press "Enter" to skip to content

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level, SEO friendly, mobile, and non-mobile compatible built for dashboard, admin panel, and web app designs.

More options:

  • It collapses and expands submenus just like accordion and tree.
  • Hides cars on mobile devices.
  • Two themes: dark and light.
  • 2 styles: Style 1 display / Style 2 display
  • It also provides the skeleton for developers.

How to make use of it:

1. Load the required assets in your Bootstrap 4 project.

<!-- Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.css">
<link rel="stylesheet" href="/path/to/fontawesome/all.css">
<link rel="stylesheet" href="/path/to/perfect-scrollbar.css">

<!-- JavaScript -->
<script src="/path/to/jquery.js"></script>
<script src="/path/to/bootstrap.bundle.js"></script>
<script src="/path/to/perfect-scrollbar.js"></script>
<script src="/path/to/nanobar.js"></script>

2. Load the Sidebar Menu’s information within the doc.

<link rel="stylesheet" href="dist/css/sidebar.css">
<script src="dist/js/sidebar.menu.js"></script>

3. Create the HTML for the sidebar menu.

<!-- sidebar -->
<nav role="navigation" class="sidebar sidebar-light rounded-0">

  <!-- sidebar menu -->
  <div class="sidebar-menu">

    <!-- menu -->
    <ul class="list list-unstyled list-scrollbar">

      <!-- simple menu -->
      <li class="list-item">

        <!-- list title -->
        <p class="list-title text-uppercase">Translate</p>

        <!-- list items -->
        <ul class="list-unstyled">
          <li><a href="#" class="list-link">Czech</a></li>
          <li><a href="#" class="list-link link-current">English</a></li>
        </ul>
      </li>

      <!-- multi-level dropdown menu -->
      <li class="list-item">

        <!-- list title -->
        <p class="list-title text-uppercase">Dashboard</p>

        <!-- list items, first level -->
        <ul class="list-unstyled">
          <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-home"></i></span>Home</a></li>
          <li><a href="#" class="list-link link-arrow link-current"><span class="list-icon"><i class="fas fa-tools"></i></span>Settings</a>

            <!-- list items, second level -->
            <ul class="list-unstyled list-hidden">
              <li><a href="#" class="list-link">Timezone</a></li>
              <li><a href="#" class="list-link link-current">Permissions</a></li>
              <li><a href="#" class="list-link link-arrow">Maintenance</a>

                <!-- list items, third level -->
                <ul class="list-unstyled list-hidden">
                  <li><a href="#" class="list-link">On</a></li>
                  <li><a href="#" class="list-link">Off</a></li>
                </ul>
              </li>
            </ul>
          </li>

          <!-- notice info -->
          <li>
            <a href="#" class="list-link">
              <div class="clearfix">
                <div class="float-left"><span class="list-icon"><i class="fas fa-bell"></i></span>Notice</div>
                <div class="float-right">
                  <span class="badge badge-danger">New</span>
                  <span class="badge badge-secondary">4</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>

      <!-- multi-level dropdown menu -->
      <li class="list-item">

        <!-- list title -->
        <p class="list-title text-uppercase">Coments</p>

        <!-- list items, first level -->
        <ul class="list-unstyled">
          <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-plus"></i></span>New</a></li>
          <li><a href="#" class="list-link link-arrow"><span class="list-icon"><i class="fas fa-comment"></i></span>Settings comments</a>

            <!-- list items, second level -->
            <ul class="list-unstyled list-hidden">
              <li><a href="#" class="list-link">Disable</a></li>
              <li><a href="#" class="list-link">Enable</a></li>
            </ul>
          </li>
        </ul>
      </li>

      <!-- simple menu -->
      <li class="list-item">

        <!-- list title -->
        <p class="list-title text-uppercase">Blog</p>

        <!-- list items -->
        <ul class="list-unstyled">
          <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-plus"></i></span>Add</a></li>
          <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-table"></i></span>List</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

4. To use the Dark theme, simply exchange the sidebar-light with sidebar-dark:

<nav role="navigation" class="sidebar sidebar-light rounded-0">
  ...
</nav>

Offcanvas Navigation With Accordion/Tree Menus, Sidebar menu Plugin/Github


See Demo And Download

Official Website(compostrap): Click Here

This superior jQuery/javascript plugin is developed by compostrap. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *