BGYHA BGYHA - 2 months ago 17
CSS Question

Examples of categorized option within a dropdown?

I'm looking for websites to use as an example that use categorized options within a drop down.

These may look like:

Fruit


  • Apple

  • Pear

  • Peach

  • Melon



Vegetables


  • Asparagus

  • Beetroot

  • Broccoli



Herbs


  • Basil

  • Dill

  • Ginger



The headings wouldn't be clickable, only the child options would be.

I'm sure I have seen websites do this before, but I'm struggling to find a good example.

Does anyone know of any websites that have adopted this method?

Answer

This is a simple dropdown with categorization.

<select>
    <optgroup label="Fruit">
      <option value="apple">Apple</option>
      <option value="pear">Pear</option>
      <option value="peach">Peach</option>
      <option value="melon">Melon</option>
    </optgroup>
    <optgroup label="Vegetables">
      <option value="asparagus">Asparagus</option>
      <option value="beetroot">Beetroot</option>
      <option value="broccoli">Broccoli</option>
    </optgroup>
    <optgroup label="Herbs">
      <option value="basil">Basil</option>
      <option value="dill">Dill</option>
      <option value="ginger">Ginger</option>
    </optgroup>
</select>