Inclusive Menu Button
A menu button module that implements the correct ARIA semantics and keyboard behavior.
npm i inclusive-menu-button --save
In the following example, three menu items are provided.
- The parent element must take
data-inclusive-menu-openstakes a value that must match the menu element's
id. In this case, it is
data-inclusive-menu-fromdefines from which side of the button the menu will grow. Any value but "right" will mean it grows from the left.
- The menu items must be sibling buttons. The script adds the
menuitemrole (as well as the
menurole to the parent menu element).
Once you've initialized the menu button, this will be the resulting markup, including all of the necessary ARIA attribution:
The following functional styling is provided for the basic layout of an archetypal "dropdown" menu appearance. You can either override and add to these styles in the cascade or remove them altogether and start from scratch.
Initialize the menu button / menu like so:
// get a menu buttonconst exampleButton = document// Make it a menu buttonconst exampleMenuButton = exampleButton
Sometimes you'd like to persist the selected menu item, using a checked state. WAI-ARIA provides
menuitemradio (allowing the checking of just one item) and
menuitemcheckbox (allowing the checking of multiple items). Checked items are marked with
You can supply the constructor with a
checkable value of 'none' (default), 'one', or 'many'. In the following example, 'one' is chosen, implementing
menuitemradio. See the examples folder for working demonstrations.
// Make it a menu button with menuitemradio buttonsconst exampleMenuButton = exampleButton checkable: 'one'
If you want to set default checked items, just do that in the HTML:
The basic CSS (see above) prefixes the checked item with a check mark. This declaration can be removed safely and replaced with a different form of indication.
You can open and close the menu programmatically.
// OpenexampleMenuBtn// CloseexampleMenuBtn// ToggleexampleMenuBtn
You can subscribe to emitted
choose event is passed the chosen item’s DOM node.
There is an
off method included for terminating event listeners.