1. Overlays
  2. Offcanvas

Components

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

Example

Placement

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

Backdrop

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.