Выпадающее меню
Выпадающее меню (dropdown) — список, который появляется по щелчку на кнопку и прячется обратно. В шапке LearnUp так устроено меню профиля: «Мой профиль», «Настройки», «Выйти». daisyUI делает его без JavaScript.
Меню на details и summary
Самый простой способ — HTML-теги <details> и <summary>, которые сами умеют раскрываться. Компонент — класс dropdown, а выпадающая часть — 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">Анна</summary>
<ul class="menu dropdown-content w-52 rounded-box bg-base-100 shadow-sm">
<li><a href="#profile">Мой профиль</a></li>
<li><a href="#settings">Настройки</a></li>
<li><a href="#logout">Выйти</a></li>
</ul>
</details>
</div>Нажмите кнопку «Анна» — под ней появится белый список из трёх пунктов, повторный щелчок его спрячет. Сам список — обычный компонент menu; фон, тень и ширину ему задают утилиты.
Вариант через фокус
Второй способ работает на CSS-псевдоклассе :focus: меню видно, пока кнопка в фокусе. Кнопкой служит любой элемент с tabindex="0":
<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">Курсы</div>
<ul tabindex="0" class="menu dropdown-content w-52 rounded-box bg-base-100 shadow-sm">
<li><a href="#html">Основы HTML</a></li>
<li><a href="#js">JavaScript с нуля</a></li>
</ul>
</div>
</div>Меню открывается щелчком и закрывается само, если щёлкнуть в любом другом месте страницы — фокус уходит с кнопки. В варианте с <details> для этого нужен скрипт.
Расположение и наведение
| Модификатор | Что делает |
|---|---|
dropdown-end | Выравнивает список по правому краю кнопки |
dropdown-top | Открывает список вверх |
dropdown-left, dropdown-right | Открывают список сбоку |
dropdown-hover | Открывает список и при наведении |
dropdown-end нужен для меню у правого края экрана, например профиля в 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">Анна</summary>
<ul class="menu dropdown-content w-48 rounded-box bg-base-100 shadow-sm">
<li><a href="#profile">Мой профиль</a></li>
<li><a href="#logout">Выйти</a></li>
</ul>
</details>
</div>
</div>
</div>Список открывается под кнопкой и не вылезает за правый край. Без dropdown-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 p-4">
<details class="dropdown">
<summary class="btn">Анна</summary>
<ul class="menu dropdown-content w-52">
<li><a href="#profile">Мой профиль</a></li>
<li><a href="#logout">Выйти</a></li>
</ul>
</details>
<p>Текст страницы под меню.</p>
</div>Откройте меню — пункты наложатся на текст страницы и станут нечитаемыми. У dropdown-content нет собственного фона: добавляйте bg-base-100 и тень shadow-sm.