Components

Dropdown

Create dropdown menus and custom selects with minimal and semantic HTML, without JavaScript.

Dropdowns are built with <details class="dropdown"> as a wrapper and <summary> and <ul> as direct childrens. Unless they are in a 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
<!-- Dropdown -->
<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 -->
<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"> or <input type="checkbox">.

Select a phase of matter...
Select phases of matter...
<!-- Radios -->
<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>

<!-- Checkboxes -->
<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"> transforms the dropdown into a button.

Dropdown as a button
<details class="dropdown">
  <summary role="button">
    Dropdown as a button
  </summary>
  <ul>
    ...
  </ul>
</details>

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
<!-- Primary -->
<details class="dropdown">
  <summary role="button">
    Primary
  </summary>
  <ul>
    ...
  </ul>
</details>

<!-- Secondary -->
<details class="dropdown">
  <summary role="button" class="secondary">
    Secondary
  </summary>
  <ul>
    ...
  </ul>
</details>

<!-- Contrast -->
<details class="dropdown">
  <summary role="button" class="contrast">
    Contrast
  </summary>
  <ul>
    ...
  </ul>
</details>

<!-- Primary outline -->
<details class="dropdown">
  <summary role="button" class="outline">
    Primary outline
  </summary>
  <ul>
    ...
  </ul>
</details>

<!-- Secondary outline -->
<details class="dropdown">
  <summary role="button" class="outline secondary">
    Secondary outline
  </summary>
  <ul>
    ...
  </ul>
</details>

<!-- Contrast outline -->
<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
<details class="dropdown">
  <summary aria-invalid="false">
    Valid phase of matter: Solid
  </summary>
  <ul>
    ...
  </ul>
</details>

<details class="dropdown">
  <summary aria-invalid="true">
    Debated classification: Plasma
  </summary>
  <ul>
    ...
  </ul>
</details>

Usage with <nav>#

You can use dropdowns inside Nav.

To change the alignment of the submenu, simply use <ul dir="rtl">.