Left Offcanvas
Left Offcanvas
This offcanvas slides in from the left side of the screen.
Perfect for navigation menus, filters, or additional content that doesn't need to be visible all the time.
Right Offcanvas
Right Offcanvas
This offcanvas slides in from the right side.
Commonly used for shopping carts, settings panels, or user profile information.
Top Offcanvas
Top Offcanvas
This offcanvas slides down from the top. Great for notifications, announcements, or search bars.
Bottom Offcanvas
Bottom Offcanvas
This offcanvas slides up from the bottom. Perfect for mobile-friendly actions, filters, or quick settings.
With Backdrop (Overlay)
Offcanvas with Backdrop
This offcanvas includes a backdrop overlay that dims the background content.
Feature 1
The backdrop helps focus user attention on the offcanvas content.
Feature 2
Clicking the backdrop will close the offcanvas.
Feature 3
Great for modal-like experiences without full modals.
Scrollable Content
Scrollable Offcanvas
This offcanvas has scrollable content when the content exceeds the viewport height.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Section 4
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Settings Panel Example
A real-world example of an offcanvas panel with theme settings and customization options.
Theme Settings
Mode
Primary Color
Layout
Settings are saved to your browser's local storage.
Wide Offcanvas
Wide Offcanvas Panel
This is a wider offcanvas panel (max-width: 2xl) perfect for displaying more complex content like forms, tables, or detailed information.
More Space
Perfect for complex layouts and multi-column content.
Forms & Tables
Great for displaying detailed forms or data tables.