How to Create Offcanvas using Bootstrap

Offcanvas is hidden sidebar which can contain navigation links, shopping cart, and more. Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.

images/coding/coding11.webp

To create a offcanvas, you need two things:

  1. Button which when clicked opens the sidebar.
  2. Content of the offcanvas sidebar.

Link or Button

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Link with href</a>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Button with data-bs-target</button>

Content

The offcanvas content contains two parts: header and body. The header has title and close button.

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>Some text as placeholder. </div>
  </div>
</div>

Placement

There is no default placement for offcanvas components. So, you have to add one of the modifier classes:

  1. .offcanvas-start: places offcanvas on the left of the viewport
  2. .offcanvas-end: places offcanvas on the right of the viewport
  3. .offcanvas-top: places offcanvas on the top of the viewport
  4. .offcanvas-bottom: places offcanvas on the bottom of the viewport