Dropdowns are built with < details class = " dropdown " > < summary > < ul > Nav , dropdowns are width: 100%; by default.
Dropdowns are not available in the class‑less version .
For style consistency with the form elements, dropdowns are styled like a select by default.
Dropdown Select Solid Liquid Gas Plasma < details class = " dropdown " > < summary > Dropdown </ summary > < ul > < li > < a href = " # " > Solid </ a > </ li > < li > < a href = " # " > Liquid </ a > </ li > < li > < a href = " # " > Gas </ a > </ li > < li > < a href = " # " > Plasma </ a > </ li > </ ul > </ details > < select name = " select " aria-label = " Select " required > < option selected disabled value = " " > Select </ option > < option > Solid </ option > < option > Liquid </ option > < option > Gas </ option > < option > Plasma </ option > false </ select > Dropdowns with checkboxes and radios# Dropdowns can be used as custom selects with < input type = " radio " > < input type = " checkbox " >
Select a phase of matter... Select phases of matter... < details class = " dropdown " > < summary > Select a phase of matter... </ summary > < ul > < li > < label > < input type = " radio " name = " phase " value = " solid " /> Solid </ label > </ li > < li > < label > < input type = " radio " name = " phase " value = " liquid " /> Liquid </ label > </ li > < li > < label > < input type = " radio " name = " phase " value = " gas " /> Gas </ label > </ li > < li > < label > < input type = " radio " name = " phase " value = " plasma " /> Plasma </ label > </ li > </ ul > </ details > < details class = " dropdown " > < summary > Select phases of matter... </ summary > < ul > < li > < label > < input type = " checkbox " name = " solid " /> Solid </ label > </ li > < li > < label > < input type = " checkbox " name = " liquid " /> Liquid </ label > </ li > < li > < label > < input type = " checkbox " name = " gas " /> Gas </ label > </ li > < li > < label > < input type = " checkbox " name = " plasma " /> Plasma </ label > </ li > </ ul > </ details > Pico does not include JavaScript code. You will probably need some JavaScript to interact with these custom dropdowns.
Button variants# < summary role = " button " >
Dropdown as a button Like regular buttons, they come with .secondary, .contrast, and .outline (not available in the class-less version ).
Primary Secondary Contrast Primary outline Secondary outline Contrast outline < details class = " dropdown " > < summary role = " button " > Primary </ summary > < ul > ... </ ul > </ details > < details class = " dropdown " > < summary role = " button " class = " secondary " > Secondary </ summary > < ul > ... </ ul > </ details > < details class = " dropdown " > < summary role = " button " class = " contrast " > Contrast </ summary > < ul > ... </ ul > </ details > < details class = " dropdown " > < summary role = " button " class = " outline " > Primary outline </ summary > < ul > ... </ ul > </ details > < details class = " dropdown " > < summary role = " button " class = " outline secondary " > Secondary outline </ summary > < ul > ... </ ul > </ details > < details class = " dropdown " > < summary role = " button " class = " outline contrast " > Contrast outline </ summary > < ul > ... </ ul > </ details > Validation states# Just like any form elements, validation states are provided with aria-invalid.
Valid phase of matter: Solid Debated classification: Plasma Usage with < nav > # You can use dropdowns inside Nav .
To change the alignment of the submenu, simply use < ul dir = " rtl " >
< nav > < ul > < li > < strong > Acme Corp </ strong > </ li > </ ul > < ul > < li > < a href = " # " class = " secondary " > Services </ a > </ li > < li > < details class = " dropdown " > < summary > Account </ summary > < ul dir = " rtl " > < li > < a href = " # " > Profile </ a > </ li > < li > < a href = " # " > Settings </ a > </ li > < li > < a href = " # " > Security </ a > </ li > < li > < a href = " # " > Logout </ a > </ li > </ ul > </ details > </ li > </ ul > </ nav >