Pico dropdowns are built from <details> and <summary>—no JavaScript required for open/close. The summary looks like a styled select; the panel holds links, buttons, or checkbox/radio lists for custom multi-select UIs.
Button-style summaries
Add role="button" on summary when you want a button-shaped trigger instead of a select-like control. Button variants (secondary, outline, contrast) apply to those summaries in the classful build.
Nav dropdowns
Inside nav, dropdowns align with navbar spacing; use dir="rtl" on details to flip submenu alignment. For keyboard-heavy custom selects you will still add a short script—Pico styles the disclosure, not the selection logic.
Self-check
- Which two elements form a Pico dropdown without JS?
- When would you use checkboxes inside a dropdown panel?