1. Overlays
  2. Offcanvas


Tailwind CSS Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more.

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.

Basic usage



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.