# Drawer

Classname	Type	Description
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
drawer-end	modifier	puts drawer to the right
drawer-open	responsive	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

Open drawer

<div class="drawer h-56 rounded overflow-hidden">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="flex flex-col items-center justify-center drawer-content">
    <label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
  </div> 
  <div class="drawer-side h-full absolute">
    <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay z-50"></label>
    <ul class="menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content z-50">
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

<div className="drawer h-56 rounded overflow-hidden">
  <input id="my-drawer" type="checkbox" className="drawer-toggle" />
  <div className="flex flex-col items-center justify-center drawer-content">
    <label for="my-drawer" className="btn btn-primary drawer-button">Open drawer</label>
  </div> 
  <div className="drawer-side h-full absolute">
    <label for="my-drawer" aria-label="close sidebar" className="drawer-overlay z-50"></label>
    <ul className="menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content z-50">
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

<div drawer h-56 rounded overflow-hidden>
  <input id="my-drawer" type="checkbox" drawer-toggle />
  <div flex flex-col items-center justify-center drawer-content>
    <label for="my-drawer" btn btn-primary drawer-button>Open drawer</label>
  </div> 
  <div drawer-side h-full absolute>
    <label for="my-drawer" aria-label="close sidebar" drawer-overlay z-50></label>
    <ul menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content z-50>
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

# Responsive

Open drawer

<div class="drawer lg-drawer-open">
  <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content flex flex-col items-center justify-center">
    <!-- Page content here -->
    <label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden">
      Open drawer
    </label>
  </div>
  <div class="drawer-side z-10">
    <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

<div className="drawer lg-drawer-open">
  <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content flex flex-col items-center justify-center">
    <!-- Page content here -->
    <label for="my-drawer-2" className="btn btn-primary drawer-button lg:hidden">
      Open drawer
    </label>
  </div>
  <div className="drawer-side z-10">
    <label for="my-drawer-2" aria-label="close sidebar" className="drawer-overlay"></label>
    <ul className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

<div drawer lg-drawer-open>
  <input id="my-drawer-2" type="checkbox" drawer-toggle />
  <div drawer-content flex flex-col items-center justify-center>
    <!-- Page content here -->
    <label for="my-drawer-2" btn btn-primary drawer-button lg:hidden>
      Open drawer
    </label>
  </div>
  <div drawer-side z-10>
    <label for="my-drawer-2" aria-label="close sidebar" drawer-overlay></label>
    <ul menu bg-base-200 text-base-content min-h-full w-80 p-4>
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

# Navbar menu for desktop + sidebar drawer for mobile

Content

<div class="drawer h-56 rounded overflow-hidden">
  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" /> 
  <div class="flex flex-col drawer-content">
    <div class="w-full navbar bg-base-300">
      <div class="flex-none lg:hidden">
        <label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </label>
      </div> 
      <div class="flex-1 px-2 mx-2">Navbar Title</div>
      <div class="flex-none hidden lg:block">
        <ul class="menu menu-horizontal">
          <li><button>Navbar Item 1</button></li>
          <li><button>Navbar Item 2</button></li>
        </ul>
      </div>
    </div>
    <div class="flex justify-center items-center flex-grow">Content</div>
  </div> 
  <div class="drawer-side h-full absolute">
    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label> 
    <ul class="p-4 menu w-60 md:w-80 min-h-full bg-base-200">
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

<div className="drawer h-56 rounded overflow-hidden">
  <input id="my-drawer-3" type="checkbox" className="drawer-toggle" /> 
  <div className="flex flex-col drawer-content">
    <div className="w-full navbar bg-base-300">
      <div className="flex-none lg:hidden">
        <label for="my-drawer-3" aria-label="open sidebar" className="btn btn-square btn-ghost">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </label>
      </div> 
      <div className="flex-1 px-2 mx-2">Navbar Title</div>
      <div className="flex-none hidden lg:block">
        <ul className="menu menu-horizontal">
          <li><button>Navbar Item 1</button></li>
          <li><button>Navbar Item 2</button></li>
        </ul>
      </div>
    </div>
    <div className="flex justify-center items-center flex-grow">Content</div>
  </div> 
  <div className="drawer-side h-full absolute">
    <label for="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label> 
    <ul className="p-4 menu w-60 md:w-80 min-h-full bg-base-200">
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

<div drawer h-56 rounded overflow-hidden>
  <input id="my-drawer-3" type="checkbox" drawer-toggle /> 
  <div flex flex-col drawer-content>
    <div w-full navbar bg-base-300>
      <div flex-none lg:hidden>
        <label for="my-drawer-3" aria-label="open sidebar" btn btn-square btn-ghost>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" inline-block w-6 h-6 stroke-current><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </label>
      </div> 
      <div flex-1 px-2 mx-2>Navbar Title</div>
      <div flex-none hidden lg:block>
        <ul menu menu-horizontal>
          <li><button>Navbar Item 1</button></li>
          <li><button>Navbar Item 2</button></li>
        </ul>
      </div>
    </div>
    <div flex justify-center items-center flex-grow>Content</div>
  </div> 
  <div drawer-side h-full absolute>
    <label for="my-drawer-3" aria-label="close sidebar" drawer-overlay></label> 
    <ul p-4 menu w-60 md:w-80 min-h-full bg-base-200>
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

# Drawer that opens from right side of page

Open drawer

<div class="drawer drawer-end">
  <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- Page content here -->
    <label for="my-drawer-4" class="drawer-button btn btn-primary">Open drawer</label>
  </div>
  <div class="drawer-side z-10">
    <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

<div className="drawer drawer-end">
  <input id="my-drawer-4" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content">
    <!-- Page content here -->
    <label for="my-drawer-4" className="drawer-button btn btn-primary">Open drawer</label>
  </div>
  <div className="drawer-side z-10">
    <label for="my-drawer-4" aria-label="close sidebar" className="drawer-overlay"></label>
    <ul className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

<div drawer drawer-end>
  <input id="my-drawer-4" type="checkbox" drawer-toggle />
  <div drawer-content>
    <!-- Page content here -->
    <label for="my-drawer-4" drawer-button btn btn-primary>Open drawer</label>
  </div>
  <div drawer-side z-10>
    <label for="my-drawer-4" aria-label="close sidebar" drawer-overlay></label>
    <ul menu bg-base-200 text-base-content min-h-full w-80 p-4>
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

FloeUI 0.1.8

UnoCSS
^0.61.0 & DaisyUI
^4.12.8