Bootstrap Offcanvas

Offcanvas panels slide in from the edge of the viewport, ideal for mobile navigation, filters, and cart drawers. This lesson covers building and positioning offcanvas components.

Bootstrap Offcanvas Overview

An offcanvas panel is triggered the same way as a modal, using data-bs-toggle="offcanvas" and data-bs-target referencing the panel's id. The panel itself uses .offcanvas combined with a placement modifier—offcanvas-start, offcanvas-end, offcanvas-top, or offcanvas-bottom—to determine which edge it slides in from.

Inside, .offcanvas-header and .offcanvas-body mirror the modal's structure, and by default a backdrop appears behind the panel and blocks scrolling of the page, though both behaviors can be disabled with data attributes for a less intrusive experience.

Concept	Description	Common Usage
offcanvas-start/end/top/bottom	Determines which edge the panel slides from	Left/right menus, top banners, bottom sheets
data-bs-toggle="offcanvas"	Trigger attribute on a button or link	Opening the panel on click
.offcanvas-header / .offcanvas-body	Structured sections inside the panel	Title/close button and scrollable main content
data-bs-scroll="true"	Allows page scrolling while panel is open	Non-blocking filter or info panels
data-bs-backdrop="false"	Removes the dimmed background overlay	Lightweight panels that don't need to block content

Bootstrap Offcanvas Example

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#cartPanel" aria-controls="cartPanel">
  View Cart
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="cartPanel" aria-labelledby="cartPanelLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="cartPanelLabel">Your Cart</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>3 items in your cart.</p>
    <a href="/checkout" class="btn btn-success w-100">Checkout</a>
  </div>
</div>

The trigger button opens the offcanvas panel identified by id="cartPanel". offcanvas-end slides the panel in from the right edge of the screen, common for cart drawers, while the header's close button uses data-bs-dismiss="offcanvas" to close it, matching the modal dismissal pattern.

Top 10 Bootstrap Offcanvas Examples

These are the offcanvas patterns you'll use for menus, filters, and drawers.

#	Example	Syntax
1	Offcanvas trigger button	`<button data-bs-toggle="offcanvas" data-bs-target="#panel">Open</button>`
2	Panel sliding from left	`<div class="offcanvas offcanvas-start" id="panel">...</div>`
3	Panel sliding from right	`<div class="offcanvas offcanvas-end" id="panel">...</div>`
4	Panel sliding from top	`<div class="offcanvas offcanvas-top" id="panel">...</div>`
5	Panel sliding from bottom	`<div class="offcanvas offcanvas-bottom" id="panel">...</div>`
6	Offcanvas header + close	`<button class="btn-close" data-bs-dismiss="offcanvas"></button>`
7	Offcanvas body content	`<div class="offcanvas-body">Content</div>`
8	Allow body scroll while open	`<div class="offcanvas" data-bs-scroll="true">...</div>`
9	No backdrop overlay	`<div class="offcanvas" data-bs-backdrop="false">...</div>`
10	Responsive offcanvas (becomes static on lg)	`<div class="offcanvas-lg offcanvas-end">...</div>`

Popular Real-World Bootstrap Offcanvas Examples

These offcanvas patterns are common in mobile navigation, filters, and shopping cart drawers.

Scenario	Pattern
Mobile navigation menu	`<div class="offcanvas offcanvas-start" id="mobileNav">...</div>`
Shopping cart drawer	`<div class="offcanvas offcanvas-end" id="cartPanel">...</div>`
Product filter panel	`<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false">...</div>`
Notification center panel	`<div class="offcanvas offcanvas-end" id="notifications">...</div>`
Bottom sheet action menu (mobile)	`<div class="offcanvas offcanvas-bottom" id="actionsSheet">...</div>`
Sidebar that becomes fixed on desktop	`<div class="offcanvas-lg offcanvas-start" id="sidebar">...</div>`
Chat widget slide-in panel	`<div class="offcanvas offcanvas-end" id="chatPanel">...</div>`
Settings quick-access drawer	`<div class="offcanvas offcanvas-end" id="quickSettings">...</div>`

Best Practices

Choose offcanvas-start or offcanvas-end based on natural reading direction and expected user habits.
Use data-bs-scroll="true" and data-bs-backdrop="false" for lightweight panels like filters that shouldn't block the page.
Always add aria-labelledby pointing to the panel's title for accessibility.
Use responsive offcanvas-{breakpoint} classes when a panel should become a static sidebar on larger screens.
Keep offcanvas-body content focused and scrollable rather than cramming in unrelated sections.
Provide a clearly visible close control in the header, not just reliance on backdrop click.
Test offcanvas panels on real touch devices for swipe and tap behavior.

Common Mistakes

Mismatching data-bs-target and the panel's id, so the trigger fails to open it.
Using offcanvas-bottom for large amounts of content, which can feel cramped on short viewports.
Forgetting data-bs-scroll="true" for filter panels, unexpectedly locking page scroll.
Not testing what happens when both a modal and an offcanvas could be triggered at once.
Ignoring the responsive offcanvas-{breakpoint} variant when a persistent sidebar was actually the goal.
Leaving the backdrop enabled on panels meant to be non-blocking, confusing users.

Key Takeaways

Offcanvas panels slide in from a chosen edge using offcanvas-start/end/top/bottom.
Triggering works identically to modals via data-bs-toggle="offcanvas".
data-bs-scroll and data-bs-backdrop control whether the page stays interactive behind the panel.
Responsive offcanvas-{breakpoint} classes let a panel become a static sidebar on larger screens.
offcanvas-header and offcanvas-body mirror the modal's structural pattern.

Pro Tip

For a sidebar that should be a slide-in drawer on mobile but a permanent, always-visible sidebar on desktop, use the responsive offcanvas-lg class instead of maintaining two separate components.