Tailwind CSS Drawer (Offcanvas)

Class Name	Type	Description
overlay	Component	Targets overlay component.
drawer	Component	Base class for drawer container.
drawer-header	Modifier	Adds basic style drawer header.
drawer-title	Modifier	Adds basic style for drawer title.
drawer-close	Modifier	Adds basic style for drawer close button.
drawer-body	Modifier	Adds basic style for drawer body.
drawer-footer	Modifier	Adds basic style for drawer footer.
overlay-open:{tw-utility-class}	Modifier	Modifies tailwind classes when the overlay is open.
overlay-backdrop-open:{tw-utility-class}	Modifier	Defines classes will be applied to backdrop when the overlay is open.
overlay-layout-open{tw-utility-class}:	Modifier	Defines classes will be applied to any elements inside the body tag when the overlay is open.
open	Modifier	Added by JS to display drawer.
opened	Modifier	It shows state of drawer opened.
drawer-start	Responsive	Toggles drawer from start position.
drawer-end	Responsive	Toggles drawer from end position.
drawer-top	Responsive	Toggles drawer from top position.
drawer-bottom	Responsive	Toggles drawer from bottom position.

Use the overlay class as the JavaScript target for addressing the overlay component, and utilize the drawer class for the drawer container. Use the drawer-start responsive class to toggle its position from the start. Apply the Tailwind CSS hidden class to keep the drawer container hidden until it is opened.

Add modifier class overlay-open: with transform class translate-x-0 to drawer container so that it shows drawer when opened.

Assign the value of the data-overlay attribute in any button to the id of the targeted overlay component, triggering the drawer to appear upon being clicked.

The drawer structure consists of the component class drawer, which serves as the container for the drawer content.

This drawer is further styled using modifier classes such as drawer-header, drawer-title, drawer-body, drawer-close and drawer-footer, which collectively define the entire structure of the drawer.

Utilize the provided example for default drawer component.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-example" data-overlay="#overlay-example">Open drawer</button>

<div id="overlay-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Placements

Positions

Utilize the responsive classes drawer-{position} to position the drawer in various positions, where {position} can be replaced with start, top, end, middle-start or bottom.

Refer to the provided examples for positioning the drawer at the default start position, as well as the end, top, or bottom positions.

<!-- Drawer start -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-start-example" data-overlay="#overlay-start-example">Toggle start</button>

<div id="overlay-start-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-start-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-start-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Drawer end -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-end-example" data-overlay="#overlay-end-example">Toggle end</button>

<div id="overlay-end-example" class="overlay overlay-open:translate-x-0 drawer drawer-end hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-end-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-end-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Drawer top -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-top-example" data-overlay="#overlay-top-example">Toggle top</button>

<div id="overlay-top-example" class="overlay drawer overlay-open:translate-y-0 drawer-top hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-top-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-top-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Drawer bottom -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-bottom-example" data-overlay="#overlay-bottom-example">Toggle bottom</button>

<div id="overlay-bottom-example" class="overlay drawer overlay-open:translate-y-0 drawer-bottom hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-bottom-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-bottom-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Illustrations

Responsive

Use TailwindCSS classes for responsive design, such as sm:, md:, lg:, xl:, and 2xl:, along with the responsive class drawer-{position} to switch the drawer position at specific breakpoints.

Utilize the provided example for a responsive drawer that moves to start position after lg: breakpoint.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-responsive-example" data-overlay="#overlay-responsive-example">Open drawer</button>

<div id="overlay-responsive-example" class="overlay overlay-open:translate-x-0 drawer drawer-end lg:drawer-start hidden" role="dialog" tabindex="-1" >
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-responsive-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-responsive-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Drawer with form

Utilize the provided example to implement drawer with form.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-form-example" data-overlay="#overlay-form-example">Toggle form</button>

<div id="overlay-form-example" class="overlay overlay-open:translate-x-0 drawer drawer-end hidden justify-start" role="dialog" tabindex="-1" >
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-form-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <form>
    <div class="drawer-body justify-start">
      <div class="mb-4">
        <label class="label label-text" for="fullName"> Full Name </label>
        <input type="text" placeholder="John Doe" class="input" id="fullName" />
      </div>
      <div class="mb-4">
        <label class="label label-text" for="email"> Email </label>
        <input type="email" placeholder="john.doe@example.com" class="input" id="email" />
      </div>
      <div class="mb-4">
        <label class="label label-text" for="contact"> Contact </label>
        <input type="text" placeholder="+91 (106) 234-34-85" class="input" id="contact" />
      </div>
      <div class="mb-4">
        <label class="label label-text" for="company"> Company </label>
        <input type="text" placeholder="ABC Technologies Ltd" class="input" id="company" />
      </div>
      <div class="mb-4">
        <label class="label label-text" for="country"> Country </label>
        <select class="select" id="country">
          <option disabled selected>Select Country</option>
          <option>USA</option>
          <option>India</option>
          <option>Canada</option>
          <option>Japan</option>
          <option>Russia</option>
        </select>
      </div>
      <div class="mb-4">
        <label class="label label-text" for="userRole"> User Role </label>
        <select class="select" id="userRole">
          <option disabled selected>Select Role</option>
          <option>Subscriber</option>
          <option>Maintainer</option>
          <option>Editor</option>
          <option>Author</option>
          <option>Admin</option>
        </select>
      </div>
      <div class="mb-0.5">
        <label class="label label-text" for="selectPlan"> Select Plan </label>
        <select class="select" id="selectPlan">
          <option disabled selected>Select Plan</option>
          <option>Basic</option>
          <option>Enterprise</option>
          <option>Company</option>
          <option>Team</option>
        </select>
      </div>
    </div>
    <div class="drawer-footer">
      <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-form-example">Close</button>
      <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
  </form>
</div>

Utilize the provided example to implement drawer with navigation. We have used collapse for collapsible item.

Refer Collapse plugin for more details.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-navigation-example" data-overlay="#overlay-navigation-example" >
  Drawer with navigation
</button>

<aside id="overlay-navigation-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden max-w-72" tabindex="-1" >
  <div class="drawer-header">
    <h3 class="drawer-title">Menu</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-navigation-example" >
      <span class="icon-[tabler--x] size-4"></span>
    </button>
  </div>
  <div class="drawer-body justify-start pb-6">
    <ul class="menu space-y-0.5 p-0 [&_.nested-collapse-wrapper]:space-y-0.5 [&_ul]:space-y-0.5">
      <li>
        <a href="#">
          <span class="icon-[tabler--home] size-5"></span>
          Dashboard
        </a>
      </li>
      <li class="nested-collapse-wrapper">
        <a class="collapse-toggle nested-collapse" id="layout-collapse" data-collapse="#layout-collapse-menu">
          <span class="icon-[tabler--layout-navbar] size-5"></span>
          Layouts
          <span class="icon-[tabler--chevron-down] collapse-icon size-4"></span>
        </a>
        <ul id="layout-collapse-menu" class="collapse hidden w-auto overflow-hidden transition-[height] duration-300" aria-labelledby="layout-collapse" >
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Content Navbar
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Horizontal
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Without Menu
            </a>
          </li>
        </ul>
      </li>
      <li class="nested-collapse-wrapper">
        <a class="collapse-toggle nested-collapse" id="front-page-collapse" data-collapse="#front-page-collapse-menu">
          <span class="icon-[tabler--box-multiple] size-5"></span>
          Front Pages
          <span class="icon-[tabler--chevron-down] collapse-icon size-4"></span>
        </a>
        <ul id="front-page-collapse-menu" class="collapse hidden w-auto overflow-hidden transition-[height] duration-300" aria-labelledby="front-page-collapse" >
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Landing Page
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Pricing Page
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Checkout Page
            </a>
          </li>
        </ul>
      </li>
      <li>
        <div class="divider text-base-content/50 py-6 after:border-0">Apps & Pages</div>
        <a href="#">
          <span class="icon-[tabler--message-chatbot] size-5"></span>
          Chat
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--mail] size-5"></span>
          Email
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--calendar] size-5"></span>
          Calendar
        </a>
      </li>
      <li class="nested-collapse-wrapper">
        <a class="collapse-toggle nested-collapse" id="ecommerce-collapse" data-collapse="#ecommerce-collapse-menu">
          <span class="icon-[tabler--shopping-cart] size-5"></span>
          Ecommerce
          <span class="icon-[tabler--chevron-down] collapse-icon size-4"></span>
        </a>
        <ul id="ecommerce-collapse-menu" class="collapse hidden w-auto overflow-hidden transition-[height] duration-300" aria-labelledby="ecommerce-collapse" >
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Products
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Categories
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Shipping & Delivery
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--point] size-5"></span>
              Location
            </a>
          </li>
        </ul>
      </li>
      <div class="divider text-base-content/50 py-6 after:border-0">Account</div>
      <li>
        <a href="#">
          <span class="icon-[tabler--login] size-5"></span>
          Sign In
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--logout-2] size-5"></span>
          Sign Out
        </a>
      </li>
      <div class="divider text-base-content/50 py-6 after:border-0">Miscellaneous</div>
      <li>
        <a href="#">
          <span class="icon-[tabler--users-group] size-5"></span>
          Support
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--files] size-5"></span>
          Documentation
        </a>
      </li>
    </ul>
  </div>
</aside>

Options usage

Bodyscroll without backdrop

Utilize the [--body-scroll:{boolean}] option to control the scrolling behavior of the layout beneath the overlay component. When set to true, it enables scrolling of the body, whereas when set to false, it disables body scrolling. By default, its value is false.

Set the [--overlay-backdrop:{string}] option, where {string} can be static, null or false. When set to false it creates drawer without backdrop. By default, its value is null.

Review the provided example for a drawer with body scroll enabled and without a backdrop.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-body-scrolling" data-overlay="#overlay-body-scrolling">
  Body scrolling (no backdrop)
</button>

<div id="overlay-body-scrolling" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden [--body-scroll:true] [--overlay-backdrop:false]" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-body-scrolling">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-body-scrolling">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Bodyscroll with backdrop

Review the provided example for a drawer with body scroll enabled and with a backdrop.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-body-scrolling-with-backdrop" data-overlay="#overlay-body-scrolling-with-backdrop">
  Body scrolling (with backdrop)
</button>

<div id="overlay-body-scrolling-with-backdrop" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden [--body-scroll:true]" role="dialog" tabindex="-1" >
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-body-scrolling-with-backdrop">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-body-scrolling-with-backdrop">
      Close
    </button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Backdrop without bodyscroll

Review the provided example for a drawer with body scroll disabled and with a backdrop.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-backdrop-without-body-scrolling" data-overlay="#overlay-backdrop-without-body-scrolling">
  Backdrop (without bodyscroll)
</button>

<div id="overlay-backdrop-without-body-scrolling" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1" >
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-backdrop-without-body-scrolling">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-backdrop-without-body-scrolling">
      Close
    </button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Custom backdrop color

For customizing the backdrop, there are two methods available:

The first method involves using the backdrop modifier class overlay-backdrop-open:{custom-color}, where you can specify any color for the backdrop.

The second method entails assigning an object value to the data-overlay-options attribute in the trigger button. Within this object, set the backdropClasses key to transition duration fixed inset-0 bg-success/70 overlay-backdrop to replace the existing backdrop classes with these customized ones.

Examine the provided examples demonstrating both methods for setting the custom backdrop in drawer.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-custom-backdrop" data-overlay="#overlay-custom-backdrop">Open drawer</button>

<div id="overlay-custom-backdrop" class="overlay overlay-open:translate-x-0 drawer drawer-start overlay-backdrop-open:bg-warning/40 hidden" role="dialog" tabindex="-1" >
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-custom-backdrop">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-custom-backdrop">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-custom-backdrop-2" data-overlay="#overlay-custom-backdrop-2" data-overlay-options='{ "backdropClasses": "transition duration fixed inset-0 bg-accent/40 overlay-backdrop" }'> Open drawer</button>

<div id="overlay-custom-backdrop-2" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-custom-backdrop-2">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-custom-backdrop-2">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Scoped based drawer

new

This example showcase usage of :backdropParent.

You can check out this example on the Sidebar component page.

JavaScript behavior

Please refer to the Modal component documentation for JavaScript behavior in overlays, which is also applicable to drawers since both modals and drawers utilize the overlay plugin.

FlyonUI

Tailwind CSS Drawer (Offcanvas)

Default

Basic example

Drawer Title

Placements

Positions

Drawer Title

Drawer Title

Drawer Title

Drawer Title

Illustrations

Responsive

Drawer Title

Drawer with form

Drawer Title

Drawer with navigation

Options usage

Bodyscroll without backdrop

Bodyscroll with backdrop

Drawer Title

Backdrop without bodyscroll

Custom backdrop color

Drawer Title

Scoped based drawer

JavaScript behavior

On this page

Drawer (Offcanvas)