Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Offcanvas Component in Bootstrap 5
Offcanvas: A sidebar component that can be toggled via JavaScript to appear from any edge of the viewport.
Basic Offcanvas
Simple Offcanvas Example
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<!-- Trigger Button -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
Open Offcanvas
</button>
<!-- Offcanvas Component -->
<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">
<div>
<p>Content goes here...</p>
</div>
</div>
</div>Placement Options
Top Offcanvas
Content from top
Right Offcanvas
Content from right
Bottom Offcanvas
Content from bottom
Left Offcanvas
Content from left
| Class | Position | Common Use Case |
|---|---|---|
.offcanvas-start | Left side | Navigation menus |
.offcanvas-end | Right side | Settings panels |
.offcanvas-top | Top | Notifications |
.offcanvas-bottom | Bottom | Cart/Checkout |
Backdrop Options
With Backdrop
Default behavior with backdrop
data-bs-backdrop=&qout;true&qout;Without Backdrop
Click outside doesn't close
data-bs-backdrop=&qout;false&qout;Responsive Offcanvas
Responsive Breakpoints
Responsive Offcanvas
Try resizing your browser to see responsive behavior.
This offcanvas behaves differently on different screen sizes.
<!-- Responsive Classes --> <div class="offcanvas-lg offcanvas-start" tabindex="-1"> <!-- Large breakpoint: becomes offcanvas --> </div> <div class="offcanvas-xl offcanvas-start" tabindex="-1"> <!-- Extra large breakpoint: becomes offcanvas --> </div> <div class="offcanvas-xxl offcanvas-start" tabindex="-1"> <!-- Extra extra large: becomes offcanvas --> </div>
Offcanvas with Body Scrolling
Scrollable Offcanvas
Only offcanvas content scrolls
data-bs-scroll=&qout;true&qout;Body Scrollable
Background body can scroll
data-bs-scroll=&qout;false&qout;Complete Example: Shopping Cart
Real-World Example: Shopping Cart
Shopping Cart (3 items)
Product Name 1
Quantity: 1
$29.99
Product Name 2
Quantity: 2
$59.98
Subtotal:$89.97
Shipping:$5.99
Total:$95.96
<!-- Shopping Cart Offcanvas -->
<button class="btn btn-warning" data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas">
<i class="bi bi-cart3"></i> Cart
<span class="badge bg-danger">3</span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="cartOffcanvas">
<div class="offcanvas-header bg-warning">
<h5 class="offcanvas-title">Shopping Cart</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<!-- Cart items and summary -->
<div class="cart-items">
<!-- Individual cart items -->
</div>
<!-- Cart summary and actions -->
<div class="cart-summary">
<!-- Totals and checkout button -->
</div>
</div>
</div>JavaScript Methods
JavaScript API
| Method | Description | Example |
|---|---|---|
.show() | Shows an offcanvas | myOffcanvas.show() |
.hide() | Hides an offcanvas | myOffcanvas.hide() |
.toggle() | Toggles an offcanvas | myOffcanvas.toggle() |
Events
show.bs.offcanvas- Fires when show method is calledshown.bs.offcanvas- Fires when offcanvas is visiblehide.bs.offcanvas- Fires when hide method is calledhidden.bs.offcanvas- Fires when offcanvas is hidden
Accessibility Features
Accessibility Best Practices
- Use proper focus management
- Add
aria-labelledbyoraria-label - Ensure keyboard navigation works
- Trap focus within offcanvas when open
- Add proper close button labels
- Test with screen readers
Common Use Cases
Mobile Navigation
Perfect for mobile menu navigation
- Slides in from left/right
- Contains site navigation
- User profile info
- Settings options
Filter/Settings Panel
For product filters or settings
- Product filters (e-commerce)
- Search filters
- User preferences
- Display settings
Notifications Panel
For displaying notifications
- Recent notifications
- Messages/inbox
- Activity feed
- Alerts panel
