Overlays
Drawer (Offcanvas)
The Drawer component serves as a concealed off-canvas sidebar, ideal for navigation and displaying additional information with various styles and placements.
Default
Basic example
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.
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`.
Illustrations
Responsive
Use TailwindCSS classes for <a href="https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range" target="_blank" class="link link-primary">responsive design</a>, such as `sm:`, `md:`, `lg:`, `xl:`, and `2xl:`, along with the responsive class `drawer-{position}` to switch the drawer position at specific breakpoints.
Drawer with form
Utilize the provided example to implement drawer with form.
Drawer with navigation
Utilize the provided example to implement drawer with navigation. We have used collapse for collapsible item.
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`.
Bodyscroll with backdrop
Review the provided example for a drawer with body scroll enabled and with a backdrop.
Backdrop without bodyscroll
Review the provided example for a drawer with body scroll disabled and with a backdrop.
Custom backdrop color
For customizing the backdrop, there are two methods available:
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
overlay | component | Create an overlay initalize instance. |
drawer | component | Provides structure and styling for the modal component. |
drawer-header | part | Adds basic style drawer header. |
drawer-title | part | Adds basic style for drawer title. |
drawer-body | part | Adds basic style for drawer body. |
drawer-footer | part | Adds basic style for drawer footer. |
overlay-open:{tw-utility-class} | variant | Modifies tailwind classes when the overlay is open. |
overlay-backdrop-open:{tw-utility-class} | variant | Defines classes will be applied to backdrop when the overlay is open. |
overlay-layout-open:{tw-utility-class} | variant | Defines classes will be applied to any elements inside the body tag when the overlay is open. |
overlay-minified:{tw-utility-class} | variant | Defines classes will be applied to any elements inside the body tag when the overlay is minfied (example: collapsible sidebar). |
drawer-start | placement | Toggles drawer from start position. |
drawer-end | placement | Toggles drawer from end position. |
drawer-top | placement | Toggles drawer from top position. |
drawer-bottom | placement | Toggles drawer from bottom position. |