ap-dropdown-menu v1.0.0

Dropdown Menu Component

A reusable and customizable dropdown menu component, built in JavaScript, with support for multiple dropdowns, closing dropdowns on outside clicks, and keyboard navigation.

Installation

To install the dropdown component into your project, use npm:

npm install dropdown-menu

Import into your JavaScript:

import DropDown from "dropdown-menu";

Add the necessary CSS to your project:

@import "dropdown-menu/dist/styles.css";

Usage

To create a dropdown, instantiate the DropDown class:

// Selectors are optional and can be customized
const dropdown = new DropDown({
	buttonSelector: "[data-dropdown-button]",
	dropdownSelector: "[data-dropdown-body]",
	linkSelector: ".dropdown a",
});

You can customize the button, dropdown, and link selectors by passing different values to the constructor.

<button data-dropdown="dropdown1">Open Dropdown 1</button>
<div id="dropdown1" data-dropdown-body class="dropdown">
	<a href="#">Item 1</a>
	<a href="#">Item 2</a>
</div>

Available Selectors:

• buttonSelector: The selector for the dropdown trigger button(s) (default is [data-dropdown-button]).
• dropdownSelector: The selector for the dropdown menu container(s) (default is [data-dropdown-body]).
• linkSelector: The selector for links inside the dropdown (default is .dropdown a).

Methods

• addEventListeners(): Adds event listeners for dropdown toggle, closing on outside click, and Escape key press.
• closeDropDown(): Closes all open dropdowns.
• closeOtherDropdowns(currentDropdown): Closes all dropdowns except the one passed as the parameter.

License

MIT License. See LICENSE for details.

Contributing

Feel free to fork the repository and submit pull requests for any improvements or bug fixes.