Daily UI #027 | Dropdown

Dropdown menus can be quite the struggle when utilised wrongly. Especially when confronted with an enormous wall of options that was apparently hidden inside the seemingly humble button.

Because of that, I designed my dropdown menu to only contain a few options. Like this, the dropdown menu shouldn’t be intimidating the user with a wall of options. And it should provide a clear overview of the available options.

On top of that, I’ve noticed that there were times when the placeholder text of a dropdown menu was embedded within the list of available options once collapsed. This confused me since I mistook the placeholder text for a selectable option.

To prevent such confusing moments, I separated the grouped selectable options from the placeholder text once the dropdown menu is collapsed.