<input type="checkbox" id="drawer-toggle" hidden>
<label for="drawer-toggle" class="open-btn">Open Drawer</label>
<label for="drawer-toggle" class="backdrop"></label>
<div class="drawer">
<div class="handle"></div>
<h3>Settings</h3>
<ul class="options">
<li>
<span>Dark Mode</span>
<div class="fake-toggle"></div>
</li>
<li>Notifications</li>
<li>Privacy</li>
<li class="danger">Log Out</li>
</ul>
</div>
Back to Snippets
Mobile Swipe-Up Drawer CSS
Replicate the native iOS experience with this bottom sheet drawer. It slides up from the bottom to display extra content or actions, and the backdrop blur keeps the focus right where you want it.
385