Tailwind CSS Drawer Components

Drawer

html

<button type="button" class="btn btn-sm" onclick="defaultDrawer.show()">Open drawer</button>
<dialog class="drawer" id="defaultDrawer">
  <div class="drawer-body p-4">
    <ul>
      <li>Drawer item 1</li>
      <li>Drawer item 2</li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="defaultDrawer.close()">Close Drawer via Backdrop</button>
</dialog>

Prevent drawer when click outside

The .drawer-backdrop provides a clickable background that closes the drawer when clicked outside the drawer, by removing this element by default prevent drawer not close when click outside

html

<button type="button" class="btn btn-sm" onclick="preventCloseClickOutsideDrawer.show()">Open drawer</button>
<dialog class="drawer" id="preventCloseClickOutsideDrawer">
  <div class="drawer-body p-4">
    <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="preventCloseClickOutsideDrawer.close()">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
     </svg>
   </button>
   <ul>
      <li>Drawer item 1</li>
      <li>Drawer item 2</li>
    </ul>
  </div>
</dialog>

Drawer open from left (start) side of page

html

<button type="button" class="btn btn-sm" onclick="leftDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-start" id="leftDrawer">
  <div class="drawer-body p-4">
    <ul>
      <li>Drawer item 1</li>
      <li>Drawer item 2</li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="leftDrawer.close()">Close Drawer via
    Backdrop</button>
</dialog>

Drawer open from right (end) side of page

html

<button type="button" class="btn btn-sm" onclick="rightDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-end" id="rightDrawer">
  <div class="drawer-body p-4">
    <ul>
      <li>Drawer item 1</li>
      <li>Drawer item 2</li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="rightDrawer.close()">Close Drawer via
    Backdrop</button>
</dialog>

Drawer open from top side of page

html

<button type="button" class="btn btn-sm" onclick="topDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-top" id="topDrawer">
  <div class="drawer-body p-4">
    <ul>
      <li>Drawer item 1</li>
      <li>Drawer item 2</li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="topDrawer.close()">Close Drawer via
    Backdrop</button>
</dialog>

Drawer open from bottom side of page

html

<button type="button" class="btn btn-sm" onclick="bottomDrawer.show()">Open drawer</button>
<dialog class="drawer drawer-bottom" id="bottomDrawer">
  <div class="drawer-body p-4">
    <ul>
      <li>Drawer item 1</li>
      <li>Drawer item 2</li>
    </ul>
  </div>
  <button type="button" class="drawer-backdrop" onclick="bottomDrawer.close()">Close Drawer via
    Backdrop</button>
</dialog>