In Bootstrap 5, the Offcanvas component is used to create an off-canvas sidebar or panel that slides in from the side of the screen. It provides a convenient way to display additional content or navigation options without taking up the entire screen space. Here's an example of how to use the Offcanvas component in Bootstrap 5:

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

    Toggle Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Offcanvas content goes here.</p>
    </div>
</div>

<script>
    var offcanvasElement = document.getElementById('offcanvasExample')
    var offcanvas = new bootstrap.Offcanvas(offcanvasElement)
</script>

In this example, we have a button with the class `btn btn-primary` that triggers the opening and closing of the offcanvas. The `data-bs-toggle="offcanvas"` attribute is used to enable the offcanvas functionality, and the `data-bs-target` attribute specifies the target offcanvas element by its ID (`#offcanvasExample`).

The offcanvas itself is represented by a `div` element with the class `offcanvas offcanvas-start`. The `tabindex="-1"` attribute ensures that the offcanvas can receive focus programmatically. The `id` attribute uniquely identifies the offcanvas, and the `aria-labelledby` attribute points to the ID of the offcanvas title element.

Inside the offcanvas, we have the `offcanvas-header` and `offcanvas-body` sections. The `offcanvas-header` contains the offcanvas title specified by the `offcanvas-title` class and a close button with the class `btn-close`. The `data-bs-dismiss="offcanvas"` attribute is used to close the offcanvas when the close button is clicked.

The actual content of the offcanvas is placed within the `offcanvas-body` section.

To initialize the offcanvas, JavaScript is used. The `script` section at the bottom of the code selects the offcanvas element using `document.getElementById()`, creates a new `Offcanvas` object with the selected element, and assigns it to the `offcanvas` variable.

Make sure to include the Bootstrap JavaScript file (`bootstrap.js` or `bootstrap.min.js`) in your HTML document for the offcanvas to work properly.

You can customize the offcanvas behavior, such as the position (start or end), animation, and other options, by adding different classes or attributes to the offcanvas element. Refer to the Bootstrap documentation for more details and examples on working with the Offcanvas component in Bootstrap 5.

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc