Bootstrap Offcanvas

Overview

Offcanvas is a sidebar component that can be toggled to appear from the edge of the viewport.

Basic Offcanvas

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

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content goes here
    </div>
</div>

Placement

<!-- Left -->
<div class="offcanvas offcanvas-start">...</div>

<!-- Right -->
<div class="offcanvas offcanvas-end">...</div>

<!-- Top -->
<div class="offcanvas offcanvas-top">...</div>

<!-- Bottom -->
<div class="offcanvas offcanvas-bottom">...</div>

JavaScript API

const offcanvas = new bootstrap.Offcanvas('#myOffcanvas');

// Show
offcanvas.show();

// Hide
offcanvas.hide();

// Toggle
offcanvas.toggle();

Next Steps

Next: Bootstrap Utilities →