Создание Dropdown меню в Alpine.js

Выпадающее меню — это список опций, который открывается по клику. С помощью Alpine.js и Tailwind CSS его можно сделать очень быстро.

---

Пример кода

<div x-data="{ open: false }" class="relative inline-block text-left">
  <!-- Кнопка -->
  <button 
    @click="open = !open" 
    type="button"
    class="inline-flex justify-center w-full rounded-md border px-4 py-2 bg-white text-sm font-medium text-gray-700 shadow hover:bg-gray-50 focus:outline-none"
    aria-expanded="true"
    aria-haspopup="true">
    Выберите опцию
    <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.293l3.71-3.08a.75.75 0 111.06 1.06l-4.25 3.5a.75.75 0 01-1.06 0l-4.25-3.5a.75.75 0 010-1.06z" clip-rule="evenodd" />
    </svg>
  </button>

  <!-- Выпадающее меню -->
  <div 
    x-show="open" 
    @click.away="open = false"
    x-transition
    class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Опция 1</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Опция 2</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Опция 3</a>
    </div>
  </div>
</div>

---

Как это работает

1. Переменная состояния
   В x-data="{ open: false }" создаём переменную open, которая управляет показом меню:
   • false — меню закрыто,
   • true — меню открыто.
2. Кнопка
   У кнопки стоит @click="open = !open", то есть при каждом клике меню либо открывается, либо закрывается.
3. Меню
   • x-show="open" показывает список опций только если open = true.
   • @click.away="open = false" автоматически закрывает меню, если кликнуть вне его области.
   • x-transition добавляет плавную анимацию появления/исчезновения.
4. Стилизация
   • Кнопка — белая с серой рамкой и небольшим эффектом наведения.
   • Список — белый фон, закруглённые углы, тень, плавное выделение при наведении.

---

Итог

• Клик по кнопке → открывается список с опциями.
• Клик вне меню → оно закрывается.
• Всё работает на чистом Alpine.js, без лишнего кода.