# 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

```html
<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

```html
<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

```html
<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

```html
<!-- 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.