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>