Nesting optgroups in a dropdownlist/select

html

responsive-design

css

javascript

byNikita Barsukov·Dec 9, 2024

HTML doesn't support nested <optgroup> within a <select>, requiring single level options. For tie-red dropdown with more depth, leverage JavaScript or libraries such as Select2. Here's a basic, non-nested example:

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option> <!-- Note: Other fruits available too (orange you glad?) -->
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option> <!-- Don't a-peel to everyone, but a root-y good choice! -->
  </optgroup>
</select>

Have a look at Select2 for an enhanced interface offering nested groups through custom scripting and styling.

Clever modeling ideas and personalized solutions

While HTML lacks support for nested <optgroup> within a <select>, some creative workarounds and personalized solutions can imitate their functionality. Here's how you can simulate nesting or create a multi-tier structure in your dropdown menus.

Indentation and bespoke CSS

Applications of padding-left to <option> elements create visual indenting, simulating a tree structure. Furthermore, unique CSS classes for different levels can augment their appearance:

.option-level-1 { padding-left: 10px; } /* Leveling up with Level 1 */
.option-level-2 { padding-left: 20px; } /* Take it up a notch with Level 2 */

Div-based modeling and JavaScript

Creating a div-based structure that toggles visibility via JavaScript can lead to an expandable and collapsible menu. Use clickable objects and the overflow-y CSS property for scrollable dropdowns.

Radio buttons as a substitute

Think about using radio buttons together with their labels as an alternative to direct nesting of optgroups. This will create a similar selection mechanism with a tiered approach.

Generating a custom dropdown requires extra effort but reciprocates in greater flexibility over appearance and behavior modification. The steps outlined here can guide you in creating such a component:

Use a div-based structure, with span or anchor points for options.
Harness CSS classes to stylize your dropdown, and items in both normal and hovered states.
Incorporate JavaScript or jQuery for dealing with visibility and selections.

Enhancing engagement

Leverage CSS pseudo elements (:before or :after) to include arrows or icons.
Implement hover effects to enrich the user interaction and experience.
Make your dropdown scrollable by setting maximum height and overflow-y: scroll.