Drawer
A drawer is a side panel that slides in from the edge of the screen over the page. In the LearnUp dashboard it holds the menu: on a phone it opens with a button, on a computer it is always visible. daisyUI builds such a panel without JavaScript — on a hidden checkbox.
How a drawer is built
| Class | What it is |
|---|---|
drawer | The outer block of the whole layout |
drawer-toggle | A hidden checkbox: checked means the panel is open |
drawer-content | The main page content |
drawer-side | The panel itself |
drawer-overlay | The dimmed layer; clicking it closes the panel |
The checkbox is controlled by <label for="..."> tags: clicking a <label> toggles the checkbox with the same id. That is why the open button and the overlay are <label> elements.
A slide-out panel
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="drawer min-h-72">
<input id="sidebar" type="checkbox" class="drawer-toggle">
<div class="drawer-content p-4">
<label for="sidebar" class="btn btn-primary">Open menu</label>
<p class="mt-4">Hello, Anna! You have 2 active courses.</p>
</div>
<div class="drawer-side">
<label for="sidebar" aria-label="Close menu" class="drawer-overlay"></label>
<ul class="menu min-h-full w-60 bg-base-200 p-4">
<li><a href="#dashboard">Home</a></li>
<li><a href="#my-courses">My courses</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
</div>
</div>Click "Open menu" — a grey panel with links slides in from the left, and the page dims. Clicking the dimmed area closes the panel. The order matters: the checkbox goes first, then drawer-content, then drawer-side.
A permanent panel on wide screens
The drawer-open modifier keeps the panel open and places it next to the content rather than on top. With the lg: prefix this happens only on screens from 1024 pixels, and the open button is hidden there with the lg:hidden utility:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="drawer min-h-72 lg:drawer-open">
<input id="dashboard-menu" type="checkbox" class="drawer-toggle">
<div class="drawer-content p-4">
<label for="dashboard-menu" class="btn btn-ghost lg:hidden">☰ Menu</label>
<h1 class="mt-2 text-2xl font-bold">My courses</h1>
</div>
<div class="drawer-side">
<label for="dashboard-menu" aria-label="Close menu" class="drawer-overlay"></label>
<ul class="menu min-h-full w-60 bg-base-200 p-4">
<li class="menu-title">LearnUp</li>
<li><a href="#dashboard">Home</a></li>
<li><a href="#my-courses" class="menu-active">My courses</a></li>
</ul>
</div>
</div>The preview window is narrower than 1024 pixels, so you see the "☰ Menu" button here. In a project on a wide screen the panel stays on the left all the time, and the button disappears. drawer-end puts the panel on the right instead of the left.
Common mistake
Giving a <label> a for that does not match the checkbox id — say, for="menu" with id="sidebar". The button then looks fine but opens nothing, and if the mistake is in the overlay, an open panel can no longer be closed. The for of every <label> and the checkbox id must match, and on a page with two drawers each needs its own id.