BS5 Offcanvas

What is Offcanvas?

Offcanvas is a side panel component that slides in from the edge of the screen. It is commonly used for mobile navigation, filters, and side drawers.

Basic offcanvas example

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

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>

  <div class="offcanvas-body">
    <p>Offcanvas content</p>
    <a href="#" class="btn btn-outline-secondary">Action</a>
  </div>
</div>

Placement

<div class="offcanvas offcanvas-start">...</div>
<div class="offcanvas offcanvas-end">...</div>
<div class="offcanvas offcanvas-top">...</div>
<div class="offcanvas offcanvas-bottom">...</div>

Backdrop and scrolling

Control backdrop and body scrolling with data attributes.

<div class="offcanvas offcanvas-start" data-bs-backdrop="true" data-bs-scroll="false">...</div>

Common use cases

• Mobile navigation drawer
• Product filters sidebar
• Settings panel

Best practices

• Keep offcanvas menus focused and short
• Use offcanvas for secondary UI, not essential content
• Ensure close button is always visible