Bootstrap 5 Offcanvas Usage

Bootstrap 5 Offcanvas is a sidebar component, which allows you to create a side menu that slides in from the edge of the screen when triggered. To create an off-canvas with Bootstrap 5, you can use the .off-canvas class.

Bootstrap 5 Offcanvas Usage:

• via data attributes: Offcanvas can be enabled by passing the data attributes like data-bs-toggle="offcanvas" and data-bs-target. We must add .offcanvas class to the element.
• via JavaScript : Offcanvas can also be enabled by using JavaScript in the HTML code.       

var example = document.getElementById('...')
var ... = new bootstrap.Tooltip(example, value)

• Options: Options can be passed through data-attributes or via JavaScript. To pass the options via data attributes we need to append the option name with data-bs- . For example data-bs-backdrop="true". We have some option like backdrop, keyboard, scroll.
• Methods: Methods are used to perform some functionalities to our offcanvas element. There are some methods like toggle(), show(), hide(), getInstance(), getOrCreateInstance().
• Events: Offcanvas functionality may be accessed by hooking into a few events exposed by the Bootstrap Offcanvas class.

Syntax:

<tag class="offcanvas" ..>
 ....
</tag>

Example 1: In this example, we will demonstrate how to pass options through data attributes in bootstrap 5 Offcanvas.

Output:

Example 2: In this example, we will demonstrate how we can place the position of offcanvas using class.

Output :

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#usage