Accessible dropdown JS library.
MIT License
A modern accessible dropdown library.
Install butane-dropdown, and add it to your package.json
dev dependencies.
$ npm install butane-dropdown --save-dev
Then import
it into the file where you'll use it.
import ButaneDropdown from 'butane-dropdown'
ButaneDropdown.init()
Below is the minimum required elements and attributes needed. An additional styling layer is also required to show/hide tab panels via the hidden
attribute. There are some basic example styles within docs/styles.css for reference.
<div data-butane-dropdown>
<button aria-controls="dropdown-menu" aria-haspopup="true" aria-expanded="false">
Example Menu
</button>
<div id="dropdown-menu" role="menu">
<button role="menuitem">Menu Item 1</button>
<button role="menuitem">Menu Item 2</button>
<button role="menuitem">Menu Item 3</button>
<button role="menuitem">Menu Item 4</button>
</div>
</div>
This project has been heavily influenced by the work of Heydon Pickerings inclusive-menu-button and Indrashish Ghoshs micromodal.
MIT. 2018 Alex Carpenter