Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.

Class name
drawer Component The root container
drawer-toggle Component For the hidden checkbox that controls the drawer
drawer-content Component Container for all page content
drawer-side Component The sidebar container
drawer-overlay Component The label covers the content when drawer is open
puts drawer to the right
Forces the drawer to be open

Drawer tags structure

.drawer // The root container
  ├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
  ├── .drawer-content // All your page content goes here
  │    ├── // navbar
  │    ├── // content
  │    ╰── // footer
  ╰── .drawer-side // Sidebar wrapper
       ├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
       ╰── // Sidebar content (menu or anything)
Drawer sidebar is hidden by default. You can make it visible on larger screens using lg:drawer-open class (or using other responsive prefixes: sm, md, lg, xl)
You can check/uncheck the checkbox using JavaScript or by clicking the <label> tag which is assigned to the hidden checkbox
# Drawer
# Responsive
Sidebar is always visible on large screen, can be toggled on small screen because of lg:drawer-open class
# Drawer that opens from right side of page
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Dashboard template
for React and Next.js

Available on daisyUI store

More details