Offcanvas Push Menu Part For Bootstrap 5/4

A easy jQuery-based Bootstrap 5/4 element that permits a hamburger button to toggle an offcanvas sidebar nav whereas pushing the primary content material (with or with out an overlay) backward and forward, as a substitute of overlaying the entire web page. This manner, customers nonetheless are in a position to navigate on the identical web page.

See Additionally:

The way to use it:

1. Add the stylesheet bootstrap-off-canvas.css and JavaScript bootstrap-off-canvas.js to your Bootstrap web page.

<!-- Bootstrap + jQuery -->
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Bootstrap Offcanvas Part -->
<hyperlink rel="stylesheet" href="css/bootstrap-off-canvas.css">
<script src="js/bootstrap-off-canvas.js"></script>

2. Create the HTML for the offcanvas push menu.

<div class="off-canvas-wrapper">
  <div id="off_canvas" class="off-canvas">
    <!-- Navbar -->
    <div class="off-canvas-nav bg-dark">
      <!-- You could use any of the bootstrap parts right here -->
      <div class="nav nav-pills nav-fill flex-column">
        <a href="#" class="text-left nav-item nav-link energetic">Dwelling</a>
        <a href="#" class="text-left nav-item nav-link">About Our Firm</a>
        <a href="#" class="text-left nav-item nav-link">Our Providers</a>
        <a href="#" class="text-left nav-item nav-link">Contact Us</a>
        <a href="#" class="text-left nav-item nav-link disabled">Characteristic Coming Quickly</a>
      </div>
    </div>
    <!-- OPTION: Including 'overlay' class right here will add overlay masks on the content material -->
    <div class="off-canvas-content overlay" data-target="#off_canvas">
      <nav class="navbar navbar-dark bg-dark">
        <button class="navbar-toggler off-canvas-toggler mx-2" kind="button" data-target="#off_canvas" aria-controls="offcanvasSupportedContent" aria-expanded="false" aria-label="Toggle off canvas menu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a category="navbar-brand ml-3 mr-auto" href="#">
          Model Title
        </a>
      </nav>
      <!-- Predominant Content material Right here -->
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            Predominant Content material Right here
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3. Customise the width of the offcanvas sidebar. Default: 300px.

:root {
  --off-canvas-width: 300px;
}

This superior jQuery plugin is developed by takaneichinose. For extra Superior Usages, please verify the demo web page or go to the official web site.