1. Components
  2. Offcanvas


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.



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


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 New

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