How to use it

This component is built with a technique known as Contextual Components. If you haven't heard of it, check the official guides for some background.

The basic usage is pretty simple. There are no mandatory fields. Just invoke the basic-dropdown component which yields the public API to its block. That top-level component has no markup, just pure behaviour. Once inside the block, the yielded API has two contextual components on it that you can use: trigger and content.

Go, use it and inspect the DOM. I know it looks ugly, we'll style it later.

As you've inspected, the markup is very simple.

The {{dd.Trigger}} component generates a simple div with some self-explainatory classes and {{dd.Content}} doesn't render anything until you open the select.

Out of the box the component already takes care of most things you need.

First of all, the component opens when you click on the trigger and closes when you click anywhere else in the page. If you are reading this on a smartphone you can also see that it opens when you tap on the trigger and it already distinguishes proper taps from taps used for scrolling. The dropdown is rendered not next to the trigger, but in a placeholder div in the root of the application and positioned automatically with inline styles.

Lastly, if you inspect the DOM a second time you can see all the a11y machinery in place to make the component accesible. Even the trigger, despite being a div, is focusable as it should be for a good keyboard experience. Also if you have the trigger focus, you can open and close it with the enter or space keys.

Now let's fix that terrible look. I'll give the dropdown a look and feel inspired by dropdown buttons in bootstrap:

It just took a little bit of CSS. You could also have just assigned the right classes and reused the styles from the framework (I can't demo that because I don't have bootstrap here).

I want to stress that when it comes to CSS, the dropdown really doesn't care. Let's make a material-like round button with a round content.

I got you.

And this is more or less everything you need to know about styles. Basically there is none, so you can add create your own in CSS or reuse the classes that CSS frameworks give you.

In the next section we will see the basic action hooks that this component gives you to hook to events like opening and closing and many others.