Bootstrap - Offcanvas Part 1: Introduction to Offcanvas

The Offcanvas component is a hidden sidebar that slides in from the side of the screen. It enhances user experience by providing extra content or navigation options in a clean and organized manner.

Basic Syntax

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">

  <div class="offcanvas-header">

    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>

    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>

  </div>

  <div class="offcanvas-body">

    Content goes here.

  </div>

</div>

Example 1: Triggering an Offcanvas

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Open Offcanvas</button>

Explanation:

The offcanvas content is hidden by default and is toggled into view using the data-bs-toggle attribute on a button or link.