BGYHA BGYHA - 1 month ago 7
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:


  • Apple

  • Pear

  • Peach

  • Melon


  • Asparagus

  • Beetroot

  • Broccoli


  • 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?


This is a simple dropdown with categorization.

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