email-organizer/offline-docs/daisyui/dropdown.md

daisyUI Documentation - Dropdown Component

Dropdown can open a menu or any other element when the button is clicked.

Classes and Usage

Core Classes:

• dropdown - The main dropdown container
• dropdown-toggle - A hidden checkbox that controls the dropdown
• dropdown-content - The content of the dropdown (menu, etc.)
• dropdown-open - Opens the dropdown by default
• dropdown-end - Aligns the dropdown to the end
• dropdown-start - Aligns the dropdown to the start
• dropdown-top - Positions the dropdown above the trigger
• dropdown-bottom - Positions the dropdown below the trigger (default)
• dropdown-left - Positions the dropdown to the left of the trigger
• dropdown-right - Positions the dropdown to the right of the trigger

Examples

Basic Dropdown

<div class="dropdown">
  <label tabindex="0" class="btn">Dropdown</label>
  <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown with Button Toggle

<div class="dropdown">
  <button tabindex="0" class="btn">Dropdown</button>
  <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown with Arrow

<div class="dropdown dropdown-end">
  <label tabindex="0" class="btn">Dropdown</label>
  <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown with Positioning

<!-- Top aligned -->
<div class="dropdown dropdown-top">
  <label tabindex="0" class="btn">Top Dropdown</label>
  <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

<!-- Left aligned -->
<div class="dropdown dropdown-left">
  <label tabindex="0" class="btn">Left Dropdown</label>
  <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

<!-- Right aligned -->
<div class="dropdown dropdown-right">
  <label tabindex="0" class="btn">Right Dropdown</label>
  <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Features

• Opens a menu or any other element when the button is clicked
• Multiple positioning options (top, bottom, left, right)
• Alignment options (start, end)
• Can be opened by default with dropdown-open class
• Works with buttons or labels as triggers
• Responsive design

This component is useful for creating context menus, navigation dropdowns, user profile menus, and any interface element that requires a popup menu.