Failed experiment
This is a failed experiment. Do not use. It is only posted here, in the hopes that someone else may be able to fix its issues.
Issues
- It is impossible to reliably detect when the
<select>
is closed, so when the menu is closed with no selection,aria-pressed
lingers until the button is unfocused.
Features
- Uses a regular
<select>
menu, ensuring it works well on a variety of devices - Accessible (?)
- Tiny (3K uncompressed and unminified!)
Examples
Basic:
<drop-down>
<button>Click me</button>
<select>
<option>One</option>
<option>Two</option>
<option onclick="alert('hi')">Three</option>
</select>
</drop-down>
With customized menu label:
<drop-down>
<button>+</button>
<select aria-label="Create new…">
<option>Document</option>
<option>Sheet</option>
<option onclick="alert('hi')">Picture</option>
</select>
</drop-down>