Overview

I'm going to tell you the story of how this dropdown addon was born.

I was building a select component but I realized that a select is nothing more than a dropdown with some extra stuff on top. And datepickers too. And colorpickers, contextual menus and many other widgets.

Essentially, any floating box of content that is opened when you interact with a trigger is basically a dropdown. Dropdowns are the foundation to at least half a dozen common UI widgets we use daily, so I decided to shape this addon in a way that was easy to reuse and customize to create those other widgets.

But if a dropdown is just a floating box activated by a trigger, why would you want to use a third part addon for such a simple thing?

Well, there are two kinds of people. Those who think that dropdowns are an easy thing and those who have actually built one.

When I transitioned from the first kind to the second I learned a lot of stuff.

  • Absolutely position elements in a performant way using the runloop
  • Overcoming z-index limitations
  • How useful MutationObservers and DOM Events can be
  • Proper detection of taps and touch scroll
  • Animating elements being removed from the screen
  • Chasing memory leaks when global events are not properly removed
  • Accessibility and keyboard navigation

After I built the initial version, I started to build other widgets on top and I had to step back a few times and identify where it wasn't flexible enough. This process ended up in a component that distilled the essence of what a dropdown is with as few assumptions as possible.

I honestly want to save you time and tears. I've been there.

This component is a building block for you to build other components on top, so it prioritizes flexibility and explicitness over succinctness in its API, but still allows allows basic usage out of the box with no ceremony.

Another thing to note is that this component doesn't have any theme by default, so unless you do something about it, it will look pretty ugly. The few styles it has are only to deal with positioning.

I hope you like it.

Installation >