Offcanvas

Offcanvas

Offcanvas is a sidebar that slides in from the edge of the screen, like a hidden menu. It is a new component in Bootstrap 5.

Basic offcanvas

<!-- Button to open it -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Open Offcanvas Sidebar
</button>

<!-- The offcanvas sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Some text as placeholder.
  </div>
</div>

The key classes

• .offcanvas is the base class.
• .offcanvas-start slides from the left.
• .offcanvas-end slides from the right.
• .offcanvas-top slides from the top.
• .offcanvas-bottom slides from the bottom.
• .offcanvas-header holds the title and close button.
• .offcanvas-body holds the content.

Opening and closing

• Open with data-bs-toggle="offcanvas" + data-bs-target="#id".
• Close with data-bs-dismiss="offcanvas".
• The close button uses .btn-close.

With backdrop

By default there is a backdrop. To disable it, add data-bs-backdrop="false".

TL;DR

• Offcanvas is a sliding sidebar, new in Bootstrap 5.
• Direction classes: start, end, top, bottom.
• Open with data-bs-toggle="offcanvas".
• Close with data-bs-dismiss="offcanvas".