Шапка и меню

Navbar — шапка сайта: полоса вверху страницы с логотипом, ссылками и кнопками. Menu — список ссылок. Обычно их используют вместе: меню стоит внутри шапки, а в личном кабинете — сбоку.

Шапка

Компонент navbar делит полосу на три части: navbar-start прижимается влево, navbar-center стоит по центру, 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="navbar bg-base-100 shadow-sm">
  <div class="navbar-start">
    <a href="#" class="btn btn-ghost text-xl">LearnUp</a>
  </div>
  <div class="navbar-end">
    <a href="#login" class="btn btn-primary">Войти</a>
  </div>
</div>

Белая полоса с тенью: название слева, кнопка «Войти» справа. Логотип оформлен как btn btn-ghost — фон появляется только при наведении.

Горизонтальное меню

Меню — это список <ul class="menu">, где каждый пункт — <li> со ссылкой. Модификатор menu-horizontal выстраивает пункты в ряд, так что меню можно поставить в центр шапки:

<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="navbar bg-base-100 shadow-sm">
  <div class="navbar-start">
    <a href="#" class="btn btn-ghost text-xl">LearnUp</a>
  </div>
  <div class="navbar-center">
    <ul class="menu menu-horizontal">
      <li><a href="#courses">Курсы</a></li>
      <li><a href="#prices">Цены</a></li>
      <li><a href="#faq">Вопросы</a></li>
    </ul>
  </div>
  <div class="navbar-end">
    <a href="#login" class="btn btn-primary">Войти</a>
  </div>
</div>

Между названием и кнопкой появились три ссылки; при наведении пункт подсвечивается фоном. Как прятать такое меню на телефоне, разобрано в уроке об адаптивной вёрстке.

Вертикальное меню

Без menu-horizontal меню вертикальное — так его ставят в боковую панель. menu-title делает подпись группы, menu-active подсвечивает текущий пункт:

<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>
 
<ul class="menu w-56 rounded-box bg-base-200">
  <li class="menu-title">Обучение</li>
  <li><a href="#dashboard" class="menu-active">Главная</a></li>
  <li><a href="#my-courses">Мои курсы</a></li>
  <li><a href="#certificates">Сертификаты</a></li>
  <li class="menu-title">Аккаунт</li>
  <li><a href="#settings">Настройки</a></li>
</ul>

Серая панель с двумя группами ссылок; пункт «Главная» залит тёмным цветом как текущий.

Вложенные пункты

Подменю делают тегами <details> и <summary> — пункт раскрывается щелчком без JavaScript:

<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>
 
<ul class="menu w-56 rounded-box bg-base-200">
  <li>
    <details open>
      <summary>Основы HTML</summary>
      <ul>
        <li><a href="#lesson-1">Теги</a></li>
        <li><a href="#lesson-2">Ссылки</a></li>
      </ul>
    </details>
  </li>
</ul>

Курс со стрелкой и двумя уроками под ним; щелчок по названию сворачивает список. Атрибут open делает его раскрытым сразу.

Частая ошибка

Положить ссылки прямо в <ul class="menu"> без <li>:

<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>
 
<ul class="menu w-56 bg-base-200">
  <a href="#dashboard">Главная</a>
  <a href="#my-courses">Мои курсы</a>
</ul>

Ссылки слиплись без отступов и не подсвечиваются при наведении: стили пунктов daisyUI привязаны к <li>. Каждый пункт меню оборачивайте в <li>.

Спасибо, что читаете!