overlays

Tailwind CSS Drawer (Offcanvas)

The Drawer component serves as a concealed off-canvas sidebar, ideal for navigation and displaying additional information with various styles and placements.

Class Name
Type
Description
overlayComponentTargets overlay component.
drawerComponentBase class for drawer container.
drawer-headerModifierAdds basic style drawer header.
drawer-titleModifierAdds basic style for drawer title.
drawer-closeModifierAdds basic style for drawer close button.
drawer-bodyModifierAdds basic style for drawer body.
drawer-footerModifierAdds basic style for drawer footer.
overlay-open:{tw-utility-class}ModifierModifies tailwind classes when the overlay is open.
overlay-backdrop-open:{tw-utility-class}ModifierDefines classes will be applied to backdrop when the overlay is open.
overlay-layout-open{tw-utility-class}:ModifierDefines classes will be applied to any elements inside the body tag when the overlay is open.
openModifierAdded by JS to display drawer.
openedModifierIt shows state of drawer opened.
drawer-startResponsiveToggles drawer from start position.
drawer-endResponsiveToggles drawer from end position.
drawer-topResponsiveToggles drawer from top position.
drawer-bottomResponsiveToggles 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.

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.

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.

Utilize the provided example to implement drawer with form.

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

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.

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

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

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.