Minimal Accessible Dropdown Plugin - jQuery Aria Dropdown

Minimal Accessible Dropdown Plugin - jQuery Aria Dropdown
File Size: 73.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A lightweight jQuery plugin for creating accessible dropdown lists/menus that follow the Accessible Rich Internet Applications (WAI-ARIA) specification.


$ npm install t-aria-dropdown --save

How to use it:

1. The required html structure for the dropdown with a toggle button.

<div class="dropdown dropdown-demo">
  <button type="button" class="dropdown__btn">Dropdown</button>
  <div class="dropdown__collapse" id="demo">
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>

2. Load jQuery library and the JavaScript file 'dropdown.js' in the html document.

<script src="jquery.min.js"></script>
<script src="dropdown.js"></script>

3. Initialize the plugin to generate a basic accessible dropdown.


4. Apply you own styles to the accessible dropdown as follows.

.dropdown {
  display: inline-block;
  position: relative;

.dropdown__collapse {
  background-color: #fff;
  border: 0.1rem solid #dddddd;
  position: absolute;
  min-width: 10rem;
  padding: 0.5rem;
  z-index: 999;

.dropdown__collapse_center {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);

.dropdown__collapse_right { right: 0; }

5. Config the accessible dropdown with the following options.

  btnClass: 'dropdown__btn',
  menuClass: 'dropdown__menu',
  dropdownExpandedClass: 'dropdown_expanded',
  btnExpandedClass: 'dropdown__btn_expanded',
  menuExpandedClass: 'dropdown__menu_expanded',
  slideSpeed: 300,
  easing: 'swing',
  collapseOnOutsideClick: true,
  collapseOnMenuClick: false,
  expandOnlyOne: true,
  expandZIndex: 10,
  collapseZIndex: 1,
  cssTransitions: false,
  mouse: false,
  dynamicBtnLabel: false



  • Updated dependencies + added responsive modifier


  • v2.0.4


  • v2.0.3: touch events fixes

This awesome jQuery plugin is developed by DavideTriso. For more Advanced Usages, please check the demo page or visit the official website.