1. Components
  2. Offcanvas

Overlays

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.

Attention

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.

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.

Learn more

Basic usage

Example

Placement

Try the top, right, and bottom examples out below.

Scrolling

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the [--body-scroll:true] attribute to toggle <body> scrolling and [--overlay-backdrop:false] to toggle the backdrop.

Custom backdrop color

Use hs-overlay-backdrop-open: to change the backdrop color.

Destroy and Reinitialize

Provides destroy method that helps to destroy an overlay.