Bootstrap Offcanvas
Offcanvas is a sidebar panel that slides in from the edge of the screen, commonly used for mobile navigation menus, filters, or shopping cart previews, without leaving the current page.
Similar to a modal, an offcanvas panel is triggered with data-bs-toggle="offcanvas" and can slide in from the start, end, top, or bottom of the viewport.
<div class="offcanvas offcanvas-start" id="myOffcanvas">...</div>Offcanvas structure
The offcanvas panel uses .offcanvas plus a placement class like .offcanvas-start (left) or .offcanvas-end (right), and contains .offcanvas-header and .offcanvas-body sections.
Triggering and closing
A button with data-bs-toggle="offcanvas" and data-bs-target opens the panel. A close button with data-bs-dismiss="offcanvas" closes it, similar to modals.
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
Open Menu
</button>
<div class="offcanvas offcanvas-start" id="sidebar">
<div class="offcanvas-header">
<h5>Menu</h5>
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<a href="#" class="d-block mb-2">Home</a>
<a href="#" class="d-block mb-2">About</a>
</div>
</div>Clicking 'Open Menu' slides a sidebar panel in from the left with navigation linksoffcanvas-start makes the panel slide in from the left edge, and the button data-bs-dismiss closes it again.
<div class="offcanvas offcanvas-end" id="cartPanel">...</div>A panel that slides in from the right side of the screenoffcanvas-end is often used for shopping cart previews or filter panels on the right.
Key points
- Offcanvas creates a sliding sidebar panel.
- Placement classes include offcanvas-start, offcanvas-end, offcanvas-top, offcanvas-bottom.
- data-bs-toggle="offcanvas" and data-bs-target open the panel.
- data-bs-dismiss="offcanvas" closes the panel.