Dropdown Menu

1. Triggers

DaisyUI's dropdown wraps a focusable trigger and a dropdown-content panel — no JS required for the basic open/close behavior, it relies on native :focus.

2. Positioning

Alignment and direction are pure modifier classes — dropdown-end, dropdown-top, dropdown-left — no positioning JS needed for the common cases.

3. Item Types

A single menu commonly mixes link items, icon items, a destructive action, a disabled state, and grouping — all expressible with menu + menu-title + a disabled li.

Shown permanently open (dropdown-open) here for inspection — remove that class for normal click-to-open behavior.

4. Nested Submenu

DaisyUI's menu-dropdown-toggle / menu-dropdown pair handles one level of nesting natively via a class toggle — no Alpine needed for this part.

A tiny x-data toggle drives the show/hide class — DaisyUI doesn't ship JS for this interaction by design, so Alpine fills exactly that one gap.

5. Hover-Open Variant

dropdown-hover opens on mouse hover in addition to focus/click — useful for desktop nav bars, but pair carefully with touch devices since hover doesn't exist there.

On touch devices this still falls back to tap-to-open, since there's no hover state to trigger from.

6. Rich Content

dropdown-content isn't limited to a menu list — any element works, e.g. a small card for a notification preview.

7. States

States the trigger and panel need to handle beyond the open/closed default.

8. Edge Cases

Real-world inputs that break naive implementations.