Bootstrap 5 Offcanvas Live Demo

Bootstrap 5 Offcanvas live demo of Offcanvas can be implemented using a link with href attribute or button with data-bs-target attribute by applying javascript to the element. JavaScript that toggles the .show class on an element with the .offcanvas class.

• offcanvas hides the content (default)
• offcanvas.show shows content

Bootstrap 5 Offcanvas Live Demo Class: There is no specific class for OffCanvas Live demo, there is an attribute that is required.

Bootstrap 5 Offcanvas Live Demo Attribute:

• data-bs-target: It accepts a CSS selector to apply javascript to hide or show Offcanvas.

Syntax:

<button type="button" data-bs-toggle="offcanvas" data-bs-target="">
 ...
</button>

Example 1: In the code below a Live Demo of a basic Offcanvas is being shown:

Output:

Example 2: The code below demonstrates the Live Demo of an Offcanvas with backdrop and scrolling:

Output:

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#live-demo