butane-dropdown
v1.0.0-alpha.6 accessibility dropdown
butane-dropdown
A modern accessible dropdown library.
Install
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'
Instantiate
ButaneDropdown.init()
Expected DOM structure
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>
Acknowledgements
This project has been heavily influenced by the work of Heydon Pickerings inclusive-menu-button and Indrashish Ghoshs micromodal. 👏🏻
License
MIT. © 2018 Alex Carpenter