Tailwind CSS Offcanvas (Drawer)
Offcanvas component, often referred to as a Drawer, offers a hidden sidebar solution for various applications such as navigation menus, shopping carts, and more, enhancing the user interface while maximizing space.
Requires JS
Note that this component requires the use of our Overlay plugin, else you can skip this message if you are already using Preline UI as a package.
Heads up!
Theme switching is disabled on this demo page to keep offcanvas previews accurate and consistent. This is intentional and applies only to this demo, it does not affect how themes work in real projects.
Default offcanvas
Use the default right-side offcanvas for menus, filters, carts, or supporting content that should stay offscreen until needed.
Alternative placements
Move the drawer to the top, left, or bottom when the default right-side placement is not the best fit.
Body scroll options
Opening an offcanvas normally locks page scrolling while the backdrop is visible.
Use [--body-scroll:true] to keep the page scrollable, and [--overlay-backdrop:false] to remove the backdrop when needed.
Custom backdrop color
Use hs-overlay-backdrop-open: utilities to customize the backdrop color when the offcanvas is open.
Destroy and reinitialize
Use the destroy method to remove an offcanvas instance, then initialize it again when you need to restore the behavior.