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.

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 New

Provides destroy method that helps to destroy an overlay.