HTML, CSS and JS UI-components for user-friendly and accessible drop-downs: WAI ARIA 1.1 compliant. Go to demo page or check on npm.

• Developed following BEM methodology
• User-friendly and accessible
• Supports nested drop-downs (>= v2.0.0)
• Supports mouse toggling (>= 2.0.0)
• Only 5KB JS (minified)
• JS plugin runs in strict mode
• Compatible with UMD

jQuery

Developed and tested with jQuery 3.2.1

• Tested on Google Chrome 57 / macOS Sierra 10.
• Tested on Google Chrome 60 / Windows 10.

Download the package from GitHub and get the compiled files from the dist folder.

The plugin is also available on npm:

npm install t-aria-dropdown

1. Include the JS script dropdown.js - or the minified production script aria-dropdown.min.js - in the head or the body of your HTML file.
2. Include the CSS file dropdown.css in the head of your HTML file, or include the SCSS files in your project.

Use following HTML markup to implement a dropdown:

<div class="dropdown">
  <button type="button" class="dropdown__btn">Dropdown</button>
  <div class="dropdown__menu">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
    </ul>
    <button type="button" class="dropdown__dismiss-btn">Close dropdown</button>
  </div>
</div>

By default the menu is aligned on the left side with the button. Use modifier classes .dropdown__menu_center or .dropdown__menu_right to change menu alignment.

Initialise the plugin as follows:

$('.dropdown').ariaDropdown({
  option1: value1,
  option2: value2
});

Methods can be called on an initialised dropdown using following syntax:

$('#my-dropdown').ariaDropdown('methodName');

The plugin supports following methods: slideDown, slideUp, toggle and destroy.

The method slideDown expands a dropdown, if currently collapsed

$('#my-dropdown').ariaDropdown('slideDown');

The method slideUp collapses a dropdown, if currently expanded.

$('#my-dropdown').ariaDropdown('slideUp');

Toggle expands or collapses a dropdown based on the current state of the dropdown.

$('#my-dropdown').ariaDropdown('toggle');

Destroy destroys a dropdown by removing the attributes, classes and event listeners added by the plugin. Also the jQuery data object is removed from the jQuery element's object.

$('#my-dropdown').ariaDropdown('destroy');

The plugin triggers following events:

• ariaDropdown.initialised after a dropdown is initialised
• ariaDropdown.slideDown when a dropdown is expanded
• ariaDropdown.slideUp when a dropdown is collapsed
• ariaDropdown.destroyed when a dropdown is destroyed

The events are triggered on window and return the dropdown's data object as arguments.

//listen for ariaDropdowns.slideDown
$(window).on('ariaDropdown.slideDown', function(event, dropdown){
  console.log('The dropdown ' + dropdown.element + ' was expanded');
});

By default the plugin is configured to use the jQuery methods slideDown() and slideUp() to expand/collapse drop-downs. Setting the option cssTransitions to 'true' will disable the JS animations. This makes possible to implement the transitions directly with css. In fact, the plugin toggles the classes passed along with the options dropdownExpandedClass, btnExpandedClass and menuExpandedClass, when a dropdown is toggled.

This project is licensed under the terms of the MIT license.

See LICENSE.md for detailed informations.