Dropdown - Accessible Kit

Usage

Basic HTML Structure (without animation):

<div data-dropdown>
    <button data-dropdown-button>
        Button Text
        <span class="dropdown__arrow"></span>
    </button>
    <div data-dropdown-menu data-no-animation>
        <div>
            <div>
                <a href="#" data-dropdown-item>Item 1</a>
                <a href="#" data-dropdown-item>Item 2</a>
            </div>
        </div>
    </div>
</div>

Animations (default):

<!-- Animations are default, no need to add any attribute -->
<div data-dropdown>
    <button data-dropdown-button>
        Button Text
        <span class="dropdown__arrow"></span>
    </button>
    <div data-dropdown-menu>
        <!-- Two wrapper divs REQUIRED for animations -->
        <div>
            <div>
                <a href="#" data-dropdown-item>Item 1</a>
                <a href="#" data-dropdown-item>Item 2</a>
            </div>
        </div>
    </div>
</div>

Important for animations:
• Animations are default - automatically enabled
• Content in data-dropdown-menu must be wrapped in two <div> wrappers
• Animation uses modern CSS Grid approach (grid-template-rows: 0fr → 1fr)
• Works without needing to know menu height beforehand
• Better alternative to transform and fixed height animations
• Animation speed: use CSS custom property --a11y-dropdown-duration (default: 0.2s)
• Easing function: use CSS custom property --a11y-dropdown-easing (default: ease)
• Automatic prefers-reduced-motion support

Setting Animation Speed:

<!-- Inline using style attribute -->
<div data-dropdown style="--a11y-dropdown-duration: 0.5s;">
    <button data-dropdown-button>Menu</button>
    <div data-dropdown-menu>
        <div><div>...</div></div>
    </div>
</div>

<!-- Custom easing -->
<div data-dropdown
     style="--a11y-dropdown-duration: 0.3s; --a11y-dropdown-easing: ease-in-out;">
    <!-- dropdown menu -->
</div>

<!-- Or globally in CSS -->
<style>
:root {
    --a11y-dropdown-duration: 0.25s;
    --a11y-dropdown-easing: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

<!-- Disable animations -->
<div data-dropdown-menu data-no-animation>
    <!-- menu without animations -->
</div>

JavaScript Initialization:

1. ES6 Module Import - init functions (Recommended)

import { initDropdowns } from './a11y-kit/a11y-dropdown.js';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initDropdowns();
});

2. ES6 Module Import - Bootstrap style (short aliases)

// Import short alias
import { Dropdown } from './a11y-kit/a11y-dropdown.js';

// Use like Bootstrap
const dropdown = new Dropdown(element, {
  closeOnSelect: true,
  closeOnOutsideClick: true,
  closeOnEscape: true,
  onOpen: (instance) => console.log('Opened'),
  onClose: (instance) => console.log('Closed'),
  onSelect: (item, index) => console.log('Selected:', item)
});

3. NPM package (Module bundlers: Astro, Vite, Webpack)

npm install accessible-kit

// Import only what you need (best for tree-shaking)
import { initDropdowns, Dropdown } from 'accessible-kit/dropdown';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initDropdowns(); // Auto-init all dropdowns

  // OR create instances manually
  const dropdown = new Dropdown(element, options);
});

Keyboard Navigation

Enter / Space - Open/close menu or select item
↓ / ↑ - Navigate between items
Home / End - Jump to first/last item
Esc - Close menu and return focus to button
Tab - Close menu and move focus

Accessible Dropdown

Navigation Menu

Animation

Without Animation

Dropdown (animations default)

Custom Animation Speed

Slow Animation (0.5s)

Fast Animation (0.1s)

Custom Easing (bounce)

Simple Examples

Basic Dropdown

Language Switcher

Right Aligned

Custom Behavior