Dropdown
A dropdown is a list that appears when you click a button and hides again. The LearnUp header uses one for the profile menu: "My profile", "Settings", "Log out". daisyUI builds it without JavaScript.
A menu on details and summary
The simplest way is the HTML <details> and <summary> tags, which can open and close by themselves. The component is the dropdown class, and the part that drops down is dropdown-content:
<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="min-h-48 p-4">
<details class="dropdown">
<summary class="btn">Anna</summary>
<ul class="menu dropdown-content w-52 rounded-box bg-base-100 shadow-sm">
<li><a href="#profile">My profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#logout">Log out</a></li>
</ul>
</details>
</div>Click the "Anna" button — a white list of three items appears under it, and a second click hides it. The list itself is a regular menu component; utilities give it a background, a shadow and a width.
The focus variant
The second way relies on the CSS :focus pseudo-class: the menu is visible while the button has focus. Any element with tabindex="0" can be the button:
<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="min-h-48 p-4">
<div class="dropdown">
<div tabindex="0" role="button" class="btn">Courses</div>
<ul tabindex="0" class="menu dropdown-content w-52 rounded-box bg-base-100 shadow-sm">
<li><a href="#html">HTML basics</a></li>
<li><a href="#js">JavaScript from scratch</a></li>
</ul>
</div>
</div>The menu opens on click and closes by itself when you click anywhere else on the page — the button loses focus. The <details> variant needs a script for that.
Placement and hover
| Modifier | What it does |
|---|---|
dropdown-end | Aligns the list with the right edge of the button |
dropdown-top | Opens the list upwards |
dropdown-left, dropdown-right | Open the list to the side |
dropdown-hover | Also opens the list on hover |
dropdown-end is needed for a menu near the right edge of the screen, such as the profile in navbar-end:
<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="min-h-48">
<div class="navbar bg-base-200">
<div class="navbar-start px-2 font-bold">LearnUp</div>
<div class="navbar-end">
<details class="dropdown dropdown-end">
<summary class="btn btn-ghost">Anna</summary>
<ul class="menu dropdown-content w-48 rounded-box bg-base-100 shadow-sm">
<li><a href="#profile">My profile</a></li>
<li><a href="#logout">Log out</a></li>
</ul>
</details>
</div>
</div>
</div>The list opens under the button and stays inside the right edge. Without dropdown-end it would start at the button's left edge and get cut off by the window.
Common mistake
Leaving the list without a background:
<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="min-h-48 p-4">
<details class="dropdown">
<summary class="btn">Anna</summary>
<ul class="menu dropdown-content w-52">
<li><a href="#profile">My profile</a></li>
<li><a href="#logout">Log out</a></li>
</ul>
</details>
<p>Page text under the menu.</p>
</div>Open the menu — the items overlap the page text and become unreadable. dropdown-content has no background of its own: add bg-base-100 and a shadow-sm.