97 lines
3.0 KiB
Markdown
97 lines
3.0 KiB
Markdown
# 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. |