Simple Multi-Level Sidebar Offcanvas Menu In JavaScript

Off-Canvas Menu is a simple, mobile-first, multi-level off-canvas menu written in vanilla JavaScript.

multi level slide out menu, off canvas menu multi level, multi level hamburger menu, multi level sidebar menu bs, multi level mobile menu, responsive off canvas menu

How to make use of it:

1. Create a nested navigation menu for a menu outside the panel.

<div class="off-canvas">
  <div class="off-canvas-header">
    <h4 class="off-canvas-title">
      Off-Canvas-Menu
    </h4>
    <div data-bs-dismiss="off-canvas" aria-label="Close">
      <div class="icon-close"></div>
    </div>
  </div>
  <div class="off-canvas-body">
    <nav>
      <ul class="list-level-0">
        <li class="list-item">
          <a class="link-level-1" href="#">
            Home
          </a>
        </li>
        <li class="list-item">
          <a class="link-level-1" href="#">
            Services&nbsp;<span class="link-arrow">&#8250;</span>
          </a>
          <ul class="list-level-1">
            <li class="list-item">
              <a class="link-level-2" href="#">
                UX-Design
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Webdesign
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Content Marketing
              </a>
            </li>
          </ul>
        </li>
        <li class="list-item">
          <a class="link-level-1" href="#">
            Team&nbsp;<span class="link-arrow">&#8250;</span>
          </a>
          <ul class="list-level-1">
            <li class="list-item">
              <a class="link-level-2" href="#">
                John
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Peter
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Gordon
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>

2. Load the main style sheet out of the menu.

<link rel="stylesheet" href="css/off-canvas-menu.css" />

3. Create a hamburger button to toggle the menu off the canvas.

<aside class="icon-open-row">
  <div class="icon-open-container">
    <div class="icon-open-col-1">
      ☰
    </div>
    <div class="icon-open-col-2">
      Open Menu
    </div>
  </div>
</aside>

Simple Multi-level Offcanvas Menu, Off Canvas Menu Plugin/Github, off canvas navigation examples