Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Offcanvas
The Offcanvas component provides a powerful way to create sliding panels that reveal content from any edge of the viewport. Perfect for navigation menus, filters, forms, or any secondary content that needs to be easily accessible without disrupting the main content flow. With support for multiple positions, backdrop options, and responsive behaviors, offcanvas panels offer flexible solutions for modern web interfaces.
Basic Example
Demonstrate the basic offcanvas functionality with both link and button triggers. The panel can contain any content, from simple text to complex components.
Body Scrolling
Enable content scrolling behind the offcanvas panel using the
data-bs-scroll="true" attribute. This allows users to continue interacting with the
main content while the offcanvas is open.
Scrolling with Backdrop
Combine scrollable content with a backdrop overlay for a semi-modal experience. The backdrop provides visual separation while maintaining content scrollability.
Static Backdrop
Create a modal-like experience with data-bs-backdrop="static" where users must
explicitly close the offcanvas using the close button. This prevents accidental dismissal
through backdrop clicks.
Responsive Behavior
Create responsive offcanvas components that adapt to different screen sizes using the
offcanvas-{breakpoint} classes. This example shows an offcanvas that
transforms into inline content on larger screens.
Placement Options
Offcanvas panels can slide in from any edge of the viewport using placement classes:
offcanvas-start (left), offcanvas-end (right),
offcanvas-top (top), and offcanvas-bottom (bottom). Choose the
placement that best suits your design and content needs.