offline docs

offline-docs/daisyui/dropdown.md

@@ -0,0 +1,97 @@
+# 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.