Bootstrap Offcanvas

Offcanvas is a flexible sidebar component that can be smoothly toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. It's incredibly useful for building hidden navigation menus, shopping cart summaries, or advanced filter/settings panels on mobile devices.

---

Basic Example

The standard structure includes a trigger mechanism (usually a button or anchor tag) and the offcanvas wrapper container itself.

• The trigger uses data-bs-toggle="offcanvas" and data-bs-target="#offcanvasExample" to locate and communicate with the correct offcanvas panel.
• The main component employs the .offcanvas class, paired with a placement class like .offcanvas-start (to explicitly anchor it to the left edge).
• The inner structure is subsequently divided into a rigid .offcanvas-header and a flexible scrolling .offcanvas-body.

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

<!-- Trigger Button -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
    Button Trigger
</button>

<!-- Offcanvas Structure -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Drawer Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Some exciting content for the drawer body goes here.</p>
    </div>
</div>

---

Placement Customization

Bootstrap 5 provides four distinct placement classes to firmly anchor the offcanvas panel to any specific side of the browser's viewport.

• .offcanvas-start: Places offcanvas abruptly on the left.
• .offcanvas-end: Places offcanvas securely on the right.
• .offcanvas-top: Places offcanvas smoothly dropping from the top.
• .offcanvas-bottom: Places offcanvas effortlessly rising from the bottom.

<!-- Right Aligned Sidebar -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight">...</div>

<!-- Top Aligned Megamenu -->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">...</div>

<!-- Bottom Aligned Sheet -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom">...</div>

---

Backdrop & Scrolling Config

Typically, opening an offcanvas component forcefully disables body scrolling and obscures the UI beneath a semi-transparent dark backdrop. Optionally, you can uniquely override both of these behaviors using straightforward data attributes directly injected on your .offcanvas element.

<!-- Added data-bs-scroll="true" and data-bs-backdrop="false" -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling">
    <div class="offcanvas-header">...</div>
    <div class="offcanvas-body">...</div>
</div>