Kenhuang Academy
  • English

      • 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 →